import {useTableModalEvent, useTableDeleteEvent} from '@hooks';
import {useMutation} from '@tanstack/react-query';
import {deleteUser, resetUserPassword} from '@apis';
import {UserListData} from '@models';
import {ColumnsType} from 'antd/es/table';
import {Button, Modal, message} from 'antd';
import {
  LARGE_TABLE_WIDTH,
  MIDDLE_TABLE_WIDTH,
  NORMAL_TABLE_WIDTH,
  SMALL_TABLE_WIDTH,
} from '@utils';

export function useResetPassword() {
  const {isLoading, mutate} = useMutation({
    mutationFn: resetUserPassword,
    onSuccess({msg}) {
      msg === '200' && message.success('密码重置成功');
    },
  });

  function onClick(name: string, id: string) {
    return function () {
      Modal.confirm({
        title: '重置密码',
        content: `你确定要将${name}的密码重置为123456吗？`,
        onOk() {
          mutate(id);
        },
      });
    };
  }

  return [isLoading, onClick] as const;
}

const tableColumns: ColumnsType<UserListData> = [
  {
    title: '用户编号',
    dataIndex: 'code',
    key: 'code',
    width: NORMAL_TABLE_WIDTH,
  },
  {
    title: '工号',
    dataIndex: 'userName',
    key: 'userName',
    width: SMALL_TABLE_WIDTH,
  },
  {
    title: '姓名',
    dataIndex: 'realName',
    key: 'realName',
    width: SMALL_TABLE_WIDTH,
  },
  {
    title: '部门',
    dataIndex: 'department',
    key: 'department',
    width: NORMAL_TABLE_WIDTH,
  },
  {
    title: '角色名称',
    dataIndex: 'role',
    key: 'role',
    width: NORMAL_TABLE_WIDTH,
  },
  {title: '邮箱', dataIndex: 'email', key: 'email', width: NORMAL_TABLE_WIDTH},
  {title: '手机', dataIndex: 'phone', key: 'phone', width: 130},
  {title: '修改人', dataIndex: 'modifyUser', key: 'modifyUser', width: 90},
  {
    title: '修改时间',
    dataIndex: 'modifyTime',
    key: 'modifyTime',
    width: MIDDLE_TABLE_WIDTH,
  },
];

export function useHandle(onFetch: () => void) {
  const [pendingId, onDelte] = useTableDeleteEvent(deleteUser, onFetch, {
    label: '用户',
  });
  const [{visible, editId}, {onClose, onEdit, onAdd}] = useTableModalEvent();
  const [isReseting, onResetClick] = useResetPassword();

  const columns: ColumnsType<UserListData> = [
    ...tableColumns,
    {
      title: '操作',
      dataIndex: 'id',
      key: 'id',
      fixed: 'right',
      width: LARGE_TABLE_WIDTH,
      render(_, {id, realName, userName}) {
        return (
          <>
            <Button
              type='text'
              className='ant-text-btn-color-primary'
              disabled={String(id) === pendingId}
              onClick={onEdit(String(id))}
            >
              修改
            </Button>

            <Button
              type='text'
              className='ant-text-btn-color-primary'
              disabled={String(id) === pendingId}
              loading={isReseting}
              onClick={onResetClick(realName, String(id))}
            >
              重置密码
            </Button>
            <Button
              type='text'
              danger
              loading={String(id) === pendingId}
              onClick={onDelte(String(id), userName)}
            >
              删除
            </Button>
          </>
        );
      },
    },
  ];

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