import React, { useRef, useState } from 'react';
import Table, { ProColumns, ActionType } from '@/components/Table';
import { message } from 'antd';
import { fetchTableData } from '@/utils/table';
import AddNftModal from './components/AddNftModel';
import { getNFTList } from '@/services/nft';

const Address: React.FC = () => {
  const tableRef = useRef<ActionType>();
  const [visible, setVisible] = useState(false);

  const columns: ProColumns<any>[] = [
    {
      title: '所有者地址',
      dataIndex: 'address',
      hideInSearch: true,
    },
    {
      title: 'NFT名称',
      dataIndex: 'name',
      hideInSearch: true,
    },
    {
      title: '图片',
      dataIndex: 'image',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '缩略图',
      dataIndex: 'avatar',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '描述',
      dataIndex: 'description',
      hideInSearch: true,
    },
  ];

  return (
    <div>
      <Table
        columns={columns}
        rowKey="id"
        search={false}
        actionRef={tableRef}
        toolBarActions={[
          {
            type: 'add',
            text: '添加NFT',
            onConfirm: () => {
              setVisible(true);
            },
          },
        ]}
        request={async (params) => {
          const res = await fetchTableData(getNFTList, params);
          return res;
        }}
      />
      <AddNftModal
        visible={visible}
        onCancel={function () {
          setVisible(false);
        }}
        onOk={async function (): Promise<void> {
          tableRef.current?.reload();
          setVisible(false);
        }}
      />
    </div>
  );
};

export default Address;