import React, { useRef } 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';

interface AddTokenModalPropsType extends ModalProps {
  onOk: (val: any) => void;
  onCancel: () => void;
}

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

const form = createForm({});

const AddTokenModal = ({ onOk, onCancel, ...rest }: AddTokenModalPropsType) => {
  const handleOk = () => {
    const formState = form.getFormState();
    onOk(formState.values);
  };

  const handleCancel = () => {
    onCancel();
  };

  return (
    <Modal title="添加地址" onOk={handleOk} onCancel={handleCancel} width={800} {...rest}>
      <Form form={form} labelCol={4} wrapperCol={18}>
        <SchemaField>
          <SchemaField.String
            name="network"
            title="网络名称"
            required
            x-decorator="FormItem"
            x-component="Input"
          />
          <SchemaField.String
            name="rpcUrl"
            title="RPC URL"
            required
            x-component-props={{ maxLength: 100, showCount: true }}
            x-decorator="FormItem"
            x-component="Input.TextArea"
          />
          <SchemaField.String
            name="apiKey"
            title="API Key"
            required
            x-decorator="FormItem"
            x-component="Input"
          />
          <SchemaField.Number
            name="contract"
            title="代币合约地址（放空则查找主代币"
            required
            x-validator="number"
            x-decorator="FormItem"
            x-component="NumberPicker"
          />
          <SchemaField.String
            name="symbol"
            title="代币符号"
            required
            x-decorator="FormItem"
            x-component="Editor"
          />
          <SchemaField.String
            name="decimals"
            title="精度"
            required
            x-decorator="FormItem"
            x-component="Editor"
          />
          <SchemaField.String
            name="browser"
            title="区块浏览器"
            required
            x-decorator="FormItem"
            x-component="Editor"
          />
        </SchemaField>
      </Form>
    </Modal>
  );
};

export default AddTokenModal;
