import {MenuListData} from '@models';
import {Button} from 'antd';
import {ColumnsType} from 'antd/es/table';
import {
  HUGE_TABLE_WIDTH,
  MIDDLE_TABLE_WIDTH,
  NORMAL_TABLE_WIDTH,
  SMALL_TABLE_WIDTH,
} from '@utils';
import {useTableModalEvent} from '@hooks';

const tableColumns: ColumnsType<MenuListData> = [
  {
    title: '菜单ID',
    dataIndex: 'url',
    key: 'url',
    width: SMALL_TABLE_WIDTH,
  },
  {
    title: '菜单名称',
    dataIndex: 'name',
    key: 'name',
    width: HUGE_TABLE_WIDTH,
  },

  {
    title: '菜单排序',
    dataIndex: 'orderBy',
    key: 'orderBy',
    width: SMALL_TABLE_WIDTH,
  },
  {
    title: '修改人',
    dataIndex: 'modifyUser',
    key: 'modifyUser',
    width: NORMAL_TABLE_WIDTH,
  },
  {
    title: '修改时间',
    dataIndex: 'modifyTime',
    key: 'modifyTime',
    width: MIDDLE_TABLE_WIDTH,
  },
];

export function useHandle() {
  const [{visible, editId}, {onAdd, onEdit, onClose: onModalClose}] =
    useTableModalEvent();

  const columns: ColumnsType<MenuListData> = [
    ...tableColumns,
    {
      title: '操作',
      dataIndex: 'id',
      key: 'id',
      fixed: 'right',
      width: SMALL_TABLE_WIDTH,
      render(_, {id}) {
        return (
          <>
            <Button
              type='text'
              className='ant-text-btn-color-primary'
              onClick={onEdit(id)}
            >
              修改
            </Button>
          </>
        );
      },
    },
  ];

  return [
    {columns, visible, editId},
    {onModalClose, onAdd},
  ] as const;
}
