/** 
  author: Zengruihan
  describe: 基础表单组件封装
  创建日期: 2023-09-05
*/
import {
Button,
Checkbox,
Col,
Form,
FormInstance,
FormProps,
Input,
Radio,
Row,
Select,
Space,
TreeSelect,
} from 'antd';
import { useIntl } from '@umijs/max';
const { TextArea } = Input;

type BaseFormProps = {
  itemColumn: ItemType[];
  config: FormProps;
};

type ItemType = {
  [key: string]: any;
};


const BaseForm = ({ itemColumn, config }: BaseFormProps) => {
  const [form] = Form.useForm();
  const intl = useIntl();

  const InputItem = (item: ItemType) => {
    return (
      <Input {... item.elementProps} placeholder={ item.elementProps?.placeholder || intl.formatMessage({
        id: 'form.input.info.enter',
      },{label: item.itemProps.label} || '')} />
    );
  };
  
  const InputPasswordItem = (item: ItemType) => {
    return <Input.Password {...item.elementProps} placeholder={item.elementProps?.placeholder || intl.formatMessage({
      id: 'form.input.info.enter',
    },{label: item.itemProps.label} || '')} />;
  };
  
  const CheckboxItem = (item: ItemType) => {
    return (
      <Space>
        {item.options.map((i: any) => (
          <Checkbox key={i.key}>{i.value}</Checkbox>
        ))}
      </Space>
    );
  };
  
  const TextAreaItem = (item: ItemType) => {
    return <TextArea {...item.elementProps} placeholder={item.elementProps?.placeholder || intl.formatMessage({
      id: 'form.input.info.enter',
    },{label: item.itemProps.label} || '')} />;
  };
  
  const RadioItem = (item: ItemType) => {
    return (
      <Radio.Group {...item.elementProps}>
        {item.options.map((i: any) => (
          <Radio key={i.key} value={i.value}>
            {i.label}
          </Radio>
        ))}
      </Radio.Group>
    );
  };
  
  
  
  const CustomItem = (item:ItemType) => {
    return item.render();
  };
  
  const SelectItem = (item: ItemType) => {
    return (
      <Select {...item.elementProps} placeholder={item.elementProps?.placeholder || intl.formatMessage({
        id: 'form.select.rules.required',
      },{label: item.itemProps.label} || '')}>
        {item.options?.map((i: any) => (
          <Select.Option key={i.key} value={i.value}>
            {i.label}
          </Select.Option>
        ))}
      </Select>
    );
  };
  
  const ButtonItem = (item: ItemType, form: FormInstance) => {
    return (
      <Space>
        {item.columns.map((i: any) => (
          <Button
           {...i.elementProps}
            key={i.key}
            onClick={
              i.onclick
                ? () => {
                    i.onclick(form);
                  }
                : undefined
            }
          >
            {i.value}
          </Button>
        ))}
      </Space>
    );
  };
  const TreeSelectItem = (item: ItemType) => {
    return (
      <TreeSelect
      {...item.elementProps}
      placeholder={item.elementProps?.placeholder || intl.formatMessage({
        id: 'form.select.rules.required',
      },{label: item.label} || '')}
      showSearch 
      allowClear
      // fieldNames={item.itemProps?.fieldNames||{}}
      // treeData={item.itemProps?.treeData}
    />
    );
  };


const itemRenderMap = new Map([
  ['input', InputItem],
  ['radio', RadioItem],
  ['inputPassword', InputPasswordItem],
  ['checkbox', CheckboxItem],
  ['select', SelectItem],
  ['button', ButtonItem],
  ['textArea', TextAreaItem],
  ['custom',CustomItem],
  ['treeSelect',TreeSelectItem]
]);
  itemColumn.forEach((item,index)=> {itemColumn[index].key = index;});
  return (
    <Form
    {...config}
    form={ config.form || form}
    >
      {
        // eslint-disable-next-line array-callback-return
        itemColumn.map((item) => {
          const renderFn = itemRenderMap.get(item.type);
          if (renderFn) {
            return item.isGrid ? (
              <Row {...item.row}>
                {item.gridColumn.map((i: any) => {
                  return (
                    <Col {...i.col} key={i.key}>
                      <Form.Item {...i.itemProps} key={i.key}>
                        {renderFn(i, form)}
                      </Form.Item>
                    </Col>
                  );
                })}
              </Row>
            ) : (
              <Form.Item {...item.itemProps} key={item.key}>
                {renderFn(item, form)}
              </Form.Item>
            );
          }
        })
      }
    </Form>
  );
};

export default BaseForm;