// src/pages/system/menu/index.tsx

import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { Popconfirm } from 'antd';
import React, { useCallback, useRef, useState } from 'react';
import ConfigurableDrawerForm, {
  type ConfigurableDrawerFormRef,
} from '@/components/DrawerForm';
import EnhancedProTable from '@/components/EnhancedProTable';
import type { ToolbarAction } from '@/components/EnhancedProTable/types';
import { formStatusType } from '@/constants';
import {
  createMenu,
  deleteMenu,
  getMenuList,
  type MenuReqVO,
  type MenuVO,
  updateMenu,
} from '@/services/system/menu';
import { handleTree } from '@/utils/tree';
import { baseMenuColumns, formColumns } from './config';

const SystemMenu = () => {
  const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
  const tableRef = useRef<ActionType>(null);

  const [type, setType] = useState<'create' | 'update'>('create');
  const [id, setId] = useState<number>(0);

  const handleEdit = (record: MenuVO) => {
    setType('update');
    setId(record.id);

    configurableDrawerRef.current?.open(record);
  };

  const onFetch = async (params: MenuReqVO) => {
    const data = await getMenuList({
      ...params,
    });
    return {
      data: handleTree(data),
      success: true,
      total: data.total,
    };
  };
  const handleAdd = () => {
    setType('create');
    configurableDrawerRef.current?.open({});
  };

  const handleSubmit = useCallback(
    async (values: MenuVO) => {
      if (type === 'create') {
        await createMenu(values);
      } else {
        await updateMenu({
          ...values,
          id,
        });
      }
      tableRef.current?.reload();
      return true;
    },
    [type, id],
  );

  const toolbarActions: ToolbarAction[] = [
    {
      key: 'add',
      label: '新建',
      type: 'primary',
      icon: <PlusOutlined />,
      onClick: handleAdd,
    },
  ];

  const actionColumns: ProColumns<MenuVO> = {
    title: '操作',
    dataIndex: 'option',
    valueType: 'option',
    fixed: 'right',
    width: 120,
    render: (_text: React.ReactNode, record: MenuVO, _: any, action: any) => [
      <a key="editable" onClick={() => handleEdit(record)}>
        编辑
      </a>,
      <Popconfirm
        title="是否删除?"
        key="delete"
        onConfirm={async () => {
          await deleteMenu(record.id);
          action?.reload();
        }}
        okText="是"
        cancelText="否"
      >
        <a>删除</a>
      </Popconfirm>,
    ],
  };
  const columns = [...baseMenuColumns, actionColumns];
  return (
    <>
      <EnhancedProTable<MenuVO>
        ref={tableRef}
        columns={columns}
        request={onFetch}
        toolbarActions={toolbarActions}
        headerTitle="租户列表"
        showIndex={false}
        showSelection={false}
      />

      <ConfigurableDrawerForm
        ref={configurableDrawerRef}
        title={formStatusType[type]}
        columns={formColumns(type)}
        onSubmit={handleSubmit}
      />
    </>
  );
};

export default SystemMenu;