import type { Markdown } from 'vuepress/markdown'
import { parseRect } from '../utils/parseRect.js'
import { resolveAttrs } from '../utils/resolveAttrs.js'
import { createContainerPlugin } from './createContainer.js'

/**
 * Flex container attributes
 *
 * Flex 容器属性
 */
interface FlexContainerAttrs {
  center?: boolean
  wrap?: boolean
  between?: boolean
  around?: boolean
  start?: boolean
  end?: boolean
  gap?: string
  column?: boolean
}

/**
 * Align plugin - Enable text alignment containers
 *
 * 对齐插件 - 启用文本对齐容器
 *
 * Syntax:
 * - ::: left
 * - ::: center
 * - ::: right
 * - ::: justify
 * - ::: flex [options]
 *
 * @param md - Markdown instance / Markdown 实例
 */
export function alignPlugin(md: Markdown): void {
  const alignList = ['left', 'center', 'right', 'justify']

  for (const name of alignList) {
    createContainerPlugin(md, name, {
      before: () => `<div style="text-align:${name}">`,
    })
  }

  createContainerPlugin(md, 'flex', {
    before: (info) => {
      const { attrs } = resolveAttrs<FlexContainerAttrs>(info)
      const styles: string[] = ['margin:16px 0;display:flex']

      const align = attrs.start ? 'flex-start' : attrs.end ? 'flex-end' : attrs.center ? 'center' : ''
      const justify = attrs.between ? 'space-between' : attrs.around ? 'space-around' : attrs.center ? 'center' : ''

      if (align)
        styles.push(`align-items:${align}`)

      if (justify)
        styles.push(`justify-content:${justify}`)

      if (attrs.column)
        styles.push('flex-direction:column')

      if (attrs.wrap)
        styles.push('flex-wrap:wrap')

      styles.push(`gap:${parseRect(attrs.gap || '16')}`)

      return `<div style="${styles.join(';')}">`
    },
  })
}