import React, { useEffect } from 'react';
import { Form, Button, Select, Input, Radio, Checkbox } from 'antd';
import Upload from '@/components/Upload';
import { useForm } from 'antd/lib/form/Form';

export const renderButtonGroup = props => {
  const { buttons, wrapper = false } = props;
  const bts = buttons.map(bt => {
    const { text, ...rest } = bt;
    return (
      <Button {...rest} key={text}>
        {text}
      </Button>
    );
  });
  if (wrapper) {
    return wrapper(bts);
  }
  return bts;
};

export const ITEM_TYPE = {
  INPUT: 'INPUT',
  SELECT: 'SELECT', // 下拉选择
  IMGSHOP: 'IMGSHOP', // 图片库
  SINGLE_RADIO: 'SINGLE_RADIO', // 单选radio
  CHECK_BOX: 'CHECK_BOX', // 多选框
};

const BaseFormItem = itemOption => {
  const { formType, options = [], ...rest } = itemOption;
  switch (formType) {
    case ITEM_TYPE.INPUT:
      // eslint-disable-next-line no-undef
      return <Input allowClear {...rest} />;
    case ITEM_TYPE.SELECT:
      return (
        <Select {...rest}>
          {options.map((o, i) => (
            <Select.Option key={`item_${i}`} {...o} />
          ))}
        </Select>
      );
    case ITEM_TYPE.IMGSHOP:
      return <Upload {...rest} />;
    case ITEM_TYPE.SINGLE_RADIO:
      // eslint-disable-next-line no-case-declarations
      return (
        <Radio.Group {...rest}>
          {options.map((o, i) => (
            <Radio key={`item_${i}`} {...o} />
          ))}
        </Radio.Group>
      );
    case ITEM_TYPE.CHECK_BOX:
      return (
        <Checkbox.Group {...rest}>
          {options.map((o, i) => (
            <Checkbox key={`item_${i}`} {...o} />
          ))}
        </Checkbox.Group>
      );
    default:
      return null;
  }
};

/**
 * 基本表单
 * @param {*} props
 *  items: 每个表单项
 *  buttons: 表单按钮
 */
const BaseForm = props => {
  const {
    items,
    buttons = [],
    buttonsWraper,
    getForm, // 用来获取表单实例
    formProps,
    children,
    ...restProps
  } = props;

  const [form] = useForm();

  useEffect(() => {
    // 执行回调让外部组件拿到表单实例
    // eslint-disable-next-line no-unused-expressions
    getForm && getForm(form);
  }, []);

  return (
    <div style={{ height: '800px', overflow: 'scroll' }}>
      <Form form={form} {...formProps} {...restProps}>
        {items &&
          items.map(item => {
            const {
              label,
              dataIndex,
              initialValue = '',
              rules = [],
              formItemProps = {},
              ...rest
            } = item;
            return (
              <Form.Item
                label={label}
                name={dataIndex}
                key={`formItem_${dataIndex}`}
                rules={rules}
                initialValue={initialValue}
                {...formItemProps}
              >
                <BaseFormItem {...rest} />
              </Form.Item>
            );
          })}
        {renderButtonGroup({
          buttons,
          wrapper: buttonsWraper || (bts => <Form.Item>{bts}</Form.Item>),
        })}
        {children}
      </Form>
    </div>
  );
};

export default BaseForm;