import { useCallback, useMemo, useRef } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { ProTable } from '@ant-design/pro-components';
import type { ActionType } from '@ant-design/pro-components';
import { App as AntdApp, Button } from 'antd';
import { createXxxColumns } from './columns';
import { deleteXxx, getXxxList } from './server';
import type { XxxListParams, XxxQuery, XxxRecord } from './types';
import './Xxx.scss';

const Xxx = () => {
  const actionRef = useRef<ActionType>();
  const { message, modal } = AntdApp.useApp();

  const handleDelete = useCallback(
    (record: XxxRecord) => {
      modal.confirm({
        title: '删除记录',
        content: `确定删除「${record.name}」吗？删除后不可恢复。`,
        okText: '删除',
        cancelText: '取消',
        okButtonProps: { danger: true },
        onOk: async () => {
          await deleteXxx(record.key);
          message.success('已删除');
          actionRef.current?.reload();
        },
      });
    },
    [message, modal],
  );

  const columns = useMemo(
    () => createXxxColumns({ onDelete: handleDelete }),
    [handleDelete],
  );

  const fetchList = useCallback(
    (params: XxxListParams) => getXxxList(params),
    [],
  );

  return (
    <div className="xxx-page">
      <ProTable<XxxRecord, XxxQuery>
        rowKey="key"
        actionRef={actionRef}
        columns={columns}
        search={{ labelWidth: 'auto', defaultCollapsed: false }}
        scroll={{ x: 900 }}
        options={false}
        pagination={{
          defaultPageSize: 10,
          showSizeChanger: true,
          hideOnSinglePage: false,
          showTotal: (total) => `共 ${total} 条`,
        }}
        toolBarRender={() => [
          <Button
            key="create"
            type="primary"
            icon={<PlusOutlined />}
            onClick={() => message.info('TODO: 打开新增表单')}
          >
            新增
          </Button>,
        ]}
        request={fetchList}
      />
    </div>
  );
};

export default Xxx;