import {
  MyButtons,
  MyColumns,
  MyPageContainer,
  MyProTableProps,
} from '@/common';
import MyEnumRadioGroup from '@/common/components/formFields/MyEnumRadioGroup';
import { Apis } from '@/gen/Apis';
import { SysModuleEnum, SysPermissionsTypeEnum } from '@/gen/Enums';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { ActionType, ProTable } from '@ant-design/pro-components';
import { Button, Space, Tag } from 'antd';
import { useEffect, useRef, useState } from 'react';
import Create from './modals/Create';
import Update from './modals/Update';

export default function Index({ title = '功能' }) {
  const [data, setData] = useState([]);
  const actionRef = useRef<ActionType>();
  const [guardName, setGuardName] = useState<string>('Admin');

  const getData = async () => {
    let data = await Apis.Permission.SysPermissions.List({
      guard_name: guardName,
    });
    setData(data.data);
  };

  useEffect(() => {
    getData();
  }, [guardName]);

  const ShowTable = () => {
    return (
      <ProTable
        {...MyProTableProps.props}
        search={false}
        pagination={false}
        actionRef={actionRef}
        expandable={{
          defaultExpandAllRows: true,
        }}
        options={false}
        dataSource={data}
        tableExtraRender={() => (
          <MyEnumRadioGroup
            enums={SysModuleEnum}
            onChange={(e) => {
              setGuardName(e as string);
            }}
            value={guardName}
          />
        )}
        toolBarRender={() => [
          <Create
            key="Create"
            reload={getData}
            title={title}
            guardName={guardName}
          />,
        ]}
        columns={[
          {
            title: '名称',
            render: (_, record) => {
              return `${record.id}_${record?.name}`;
            },
          },
          { title: 'icon', dataIndex: 'icon' },
          MyColumns.EnumTag({
            title: '类型',
            dataIndex: 'type',
            valueEnum: SysPermissionsTypeEnum,
          }),
          { title: '链接', dataIndex: 'path' },
          // { title: '前端表示', dataIndex: 'key' },
          {
            title: '后端API',
            dataIndex: 'backend_apis',
            render: (_, item) => {
              return (
                <Space direction="vertical">
                  {item.backend_apis?.map((item: string) => (
                    <Tag key={item}>{item}</Tag>
                  ))}
                </Space>
              );
            },
          },
          MyColumns.Option({
            render: (_, item: any, index) => (
              <Space key={index}>
                <Button
                  size="small"
                  icon={<UpOutlined />}
                  disabled={!item.parent_id}
                  onClick={() => {
                    Apis.Permission.SysPermissions.Move({
                      id: item.id,
                      type: 'up',
                    }).then(() => {
                      getData();
                    });
                  }}
                />
                <Button
                  size="small"
                  icon={<DownOutlined />}
                  disabled={!item.parent_id}
                  onClick={() => {
                    Apis.Permission.SysPermissions.Move({
                      id: item.id,
                      type: 'down',
                    }).then(() => {
                      getData();
                    });
                  }}
                ></Button>
                <Create
                  key="Create"
                  reload={getData}
                  title={title}
                  item={item}
                  guardName={guardName}
                  buttonProps={{
                    size: 'small',
                    title: '添加下级菜单',
                    type: 'link',
                  }}
                />
                <Update
                  item={item}
                  reload={getData}
                  title={title}
                  guardName={guardName}
                />
                <MyButtons.Delete
                  onConfirm={() =>
                    Apis.Permission.SysPermissions.Delete({ id: item.id }).then(
                      () => getData(),
                    )
                  }
                />
              </Space>
            ),
          }),
        ]}
      />
    );
  };

  return (
    <MyPageContainer
      title={title}
      enableTabs={true}
      tabKey="system-permissions"
      tabLabel={title}
    >
      <ShowTable />
    </MyPageContainer>
  );
}
