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

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

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 () => {
      const formState = form.getFormState();
      await checkAssetID({ assetid: formState.values.assetid });
      setLoading(true);
      const isInit = await initWeb3();
      if (isInit) {
        const contractInfo = (await getContractInfo({ erc: ContractType.NFT721 })) as any;
        const res = (await getNFTContractList()) as any;
        const signature = (await getSignature({
          address: web3.eth.defaultAccount,
          assetid: formState.values.assetid,
        })) as any;
        console.log('signature = ', signature);
        let tx_hash = '';
        try {
          tx_hash = await NFTMint({
            abi: contractInfo.abi,
            address: res.items[0].address,
            toAddress: formState.values.address,
            sign: signature,
          });
        } catch (error) {
          setLoading(false);
          message.error('创建失败');
          onCancel();
          return;
        }
        formState.values.tx_hash = tx_hash;
        await mintNFT(formState.values);
        setLoading(false);
        onOk();
      } else {
        setLoading(false);
      }
    });
  };

  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>,
      ]}
      onCancel={handleCancel}
      {...rest}
    >
      <Form form={form} labelCol={4} wrapperCol={18}>
        <SchemaField>
          <SchemaField.String
            name="address"
            title="所有者地址"
            x-decorator="FormItem"
            x-component="Input"
          />
          <SchemaField.String
            name="assetid"
            title="assetID"
            required
            x-decorator="FormItem"
            x-component="Input"
          />
        </SchemaField>
      </Form>
    </Modal>
  );
};

export default AddNftModal;