import { h } from 'vue'
import { $t } from '@/locales'
import { ElTag } from 'element-plus'
import ArtSvgIcon from '@/components/core/base/art-svg-icon/index.vue'
import ArtButtonTable from '@/components/core/forms/art-button-table/index.vue'
import {
  getMenuPdaDisplayIcon,
  getMenuPdaDisplayTitle,
  getMenuPdaStatusMeta,
  getMenuPdaTypeTag,
  getMenuPdaTypeText
} from './menuPdaPage.helpers'

export function createMenuPdaTableColumns({ handleEditMenu, handleDeleteMenu }) {
  return [
    {
      prop: 'name',
      label: $t('pages.manager.menuPda.table.name'),
      minWidth: 180,
      formatter: (row) => getMenuPdaDisplayTitle(row)
    },
    {
      prop: 'icon',
      label: $t('pages.manager.menuPda.table.iconPreview'),
      width: 96,
      align: 'center',
      formatter: (row) => {
        const icon = getMenuPdaDisplayIcon(row)
        if (!icon) return h('span', { class: 'text-g-400' }, '-')
        return h(
          'div',
          {
            class:
              'mx-auto flex h-8 w-8 items-center justify-center rounded-md border border-[var(--art-border-color)] bg-[var(--art-main-bg-color)]'
          },
          [h(ArtSvgIcon, { icon, class: 'text-base text-g-700' })]
        )
      }
    },
    {
      prop: 'type',
      label: $t('pages.manager.menuPda.table.menuType'),
      width: 110,
      formatter: (row) =>
        h(ElTag, { type: getMenuPdaTypeTag(row), effect: 'light' }, () => getMenuPdaTypeText(row))
    },
    {
      prop: 'route',
      label: $t('table.route'),
      minWidth: 180,
      formatter: (row) => row.route || ''
    },
    {
      prop: 'authority',
      label: $t('table.authority'),
      minWidth: 180,
      formatter: (row) => row.authority || '-'
    },
    {
      prop: 'sort',
      label: $t('table.sort'),
      width: 90
    },
    {
      prop: 'status',
      label: $t('table.status'),
      width: 100,
      formatter: (row) => {
        const statusMeta = getMenuPdaStatusMeta(row.status)
        return h(ElTag, { type: statusMeta.type, effect: 'light' }, () => statusMeta.text)
      }
    },
    {
      prop: 'memo',
      label: $t('table.memo'),
      minWidth: 180,
      showOverflowTooltip: true,
      formatter: (row) => row.memo || '-'
    },
    {
      prop: 'operation',
      label: $t('table.operation'),
      width: 120,
      align: 'right',
      formatter: (row) =>
        h('div', { class: 'flex justify-end' }, [
          h(ArtButtonTable, {
            type: 'edit',
            onClick: () => handleEditMenu(row)
          }),
          h(ArtButtonTable, {
            type: 'delete',
            onClick: () => handleDeleteMenu(row)
          })
        ])
    }
  ]
}