import React, { useState, useRef } from 'react';
import Table, { ProColumns, ActionType } from '@/components/Table';
import { addCoinType, getCoinTypeList, modifyCoinType } from '@/services/recharge/coinType';
import { getContractInfo } from '@/services/contract';
import { fetchTableData } from '@/utils/table';
import AddCoinTypeModal from '../components/AddCoinTypeModal';
import EditCoinTypeModal from '../components/EditCoinTypeModal';
import { initWeb3, deployContract, transfer } from '@/utils/web3';
import { ContractType } from '@/constants/enum/contract';

const CoinTypeList = () => {
  const tableRef = useRef<ActionType>();

  const [isModalVisible, setIsModalVisible] = useState(false);
  const [isEditModalVisible, setIsEditModalVisible] = useState(false);
  const [modalData, setModalData] = useState({});

  const handleEdit = (row: any) => {
    setModalData(row);
    setIsEditModalVisible(true);
    tableRef.current?.reload();
  };

  const columns: ProColumns<any>[] = [
    {
      title: '游戏币名称',
      dataIndex: 'name',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: 'usdt比例',
      dataIndex: 'usdt_price',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: 'eth比例',
      dataIndex: 'eth_price',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '代币发行总量',
      dataIndex: 'total',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '操作',
      valueType: 'option',
      width: 150,
      render: (_, row) => [
        <a
          key="edit"
          onClick={() => {
            handleEdit(row);
          }}
        >
          编辑
        </a>,
      ],
    },
  ];
  return (
    <div>
      <Table
        columns={columns}
        rowKey="id"
        search={false}
        toolBarActions={[
          {
            type: 'add',
            onConfirm: () => {
              setIsModalVisible(true);
            },
          },
        ]}
        actionRef={tableRef}
        request={async (params) => {
          const res = await fetchTableData(getCoinTypeList, params);
          return res;
        }}
      />
      <AddCoinTypeModal
        visible={isModalVisible}
        onCancel={function () {
          setIsModalVisible(false);
        }}
        onOk={async function (val: any): Promise<void> {
          const res = await getContractInfo({ erc: ContractType.ERC20 });
          await initWeb3();
          const result = await deployContract(res.abi, res.bin, [
            val.num,
            val.tokenName,
            val.tokenSymbol,
          ]);
          val.address = result;
          await addCoinType(val);
          setIsModalVisible(false);
          tableRef.current?.reload();
        }}
      />
      <EditCoinTypeModal
        visible={isEditModalVisible}
        editModalData={modalData}
        onCancel={function () {
          setIsEditModalVisible(false);
        }}
        onOk={async function (val: any): Promise<void> {
          await modifyCoinType(val);
          setIsEditModalVisible(false);
          tableRef.current?.reload();
        }}
      />
    </div>
  );
};

export default CoinTypeList;
