import React, { useRef, useState } from 'react';
import { createForm } from '@formily/core';
import { createSchemaField } from '@formily/react';
import Modal, { ModalProps } from '@/components/Modal';
// import { fetchTableData } from '@/utils/table';
import { Form, FormItem, Input, NumberPicker } from '@formily/antd';
import { Button } from 'antd';
import { initWeb3, NFTMint } from '@/utils/web3';
import { getContractInfo } from '@/services/contract';
import { getNFTContractList, mintNFT } from '@/services/nft';
import { ContractType } from '@/constants/enum/contract';

interface AddNftModalPropsType extends ModalProps {
  onOk: () => void;
  onCancel: () => void;
  // loading: boolean;
}

const SchemaField = createSchemaField({
  components: {
    FormItem,
    Input,
    NumberPicker,
  },
});

const form = createForm({});

const AddNftModal = ({ onOk, onCancel, ...rest }: AddNftModalPropsType) => {
  const [loading, setLoading] = useState(false);

  const handleOk = async () => {
    form.submit(async () => {
      setLoading(true);
      const formState = form.getFormState();
      await initWeb3();
      const contractInfo = await getContractInfo({ erc: ContractType.NFT721 });
      const res = await getNFTContractList();
      const tx_hash = await NFTMint({
        abi: contractInfo.abi,
        address: res.items[0].address,
        toAddress: formState.values.toAddress,
        name: formState.values.name,
      });
      console.log('tx_hash = ', tx_hash);
      formState.values.tx_hash = tx_hash;
      await mintNFT(formState.values);
      setLoading(false);
      onOk();
    });
  };
  const handleCancel = () => {
    onCancel();
  };

  return (
    <Modal
      title="添加NFT"
      width={800}
      footer={[
        <Button key="cancel" onClick={handleCancel}>
          取消
        </Button>,
        <Button key="submit" type="primary" loading={loading} onClick={handleOk}>
          确认
        </Button>,
      ]}
      {...rest}
    >
      <Form form={form} labelCol={4} wrapperCol={18}>
        <SchemaField>
          <SchemaField.String
            name="toAddress"
            title="所有者地址"
            x-decorator="FormItem"
            x-component="Input"
          />
          <SchemaField.String
            name="name"
            title="名称"
            required
            x-decorator="FormItem"
            x-component="Input"
          />
          <SchemaField.String
            name="image"
            title="图片"
            required
            x-decorator="FormItem"
            x-component="Input"
          />
          <SchemaField.String
            name="avatar"
            title="缩略图"
            required
            x-decorator="FormItem"
            x-component="Input"
          />
          <SchemaField.String
            name="description"
            title="描述"
            required
            x-decorator="FormItem"
            x-component="Input"
          />
        </SchemaField>
      </Form>
    </Modal>
  );
};

export default AddNftModal;