// 创建弹窗
import React, { useRef } from 'react';
import { createForm, onFieldReact, FormPathPattern, Field } from '@formily/core';
import { FormProvider, createSchemaField } from '@formily/react';
import { getCoinTypeList } from '@/services/recharge/coinType';
import Modal, { ModalProps } from '@/components/Modal';
import { Form, FormItem, Input, Select } from '@formily/antd';
import { action } from '@formily/reactive';

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

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

const useAsyncDataSource = (
  pattern: FormPathPattern,
  service: (field: Field) => Promise<{ label: string; value: any }[]>,
) => {
  onFieldReact(pattern, (field) => {
    service(field).then(
      action.bound((data) => {
        field.dataSource = data;
      }),
    );
  });
};

const form = createForm({
  effects: () => {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    useAsyncDataSource('bc_name', async (field) => {
      const list = await getCoinTypeList({ page: 1, page_size: 10 });
      const option = [];
      for (let index = 0; index < list.items.length; index++) {
        const element = list.items[index];
        const item = {
          label: element.bc_name,
          value: element.bc_name,
        };
        option.push(item);
      }
      return option;
    });
  },
});

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

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

  return (
    <Modal title="创建收款地址" onOk={handleOk} onCancel={handleCancel} width={800} {...rest}>
      <FormProvider form={form}>
        <SchemaField>
          <SchemaField.String
            name="bc_name"
            title="游戏币名称"
            required
            x-decorator="FormItem"
            x-component="Select"
            x-component-props={{
              placeholder: '',
            }}
          />
          <SchemaField.String
            name="address"
            title="收款地址"
            x-decorator="FormItem"
            x-component="Input"
            x-component-props={{
              placeholder: '不传则后台生成',
            }}
          />
        </SchemaField>
      </FormProvider>
      {/* <Form form={form} labelCol={4} wrapperCol={18}> */}

      {/* </Form> */}
    </Modal>
  );
};

export default AddAddressModal;