import {Col, Form, Row} from "antd";
import React, {Key} from "react";
import UploadDom from "../UploadDom";
import style from "./style.less";

import {FormItem, IProps} from "./types";

const DynamicForms = React.memo((props: IProps) => {
  const {form, responsiveLayout, formItemLayout, formItems, buttonDom, buttonSpan} = props;

  /**
   * 渲染表单项
   *
   * @param item 表单项信息
   * @param index 表单项索引
   * @returns 表单项的JSX元素
   */
  const renderFormItem = (item: FormItem, index: Key | null | undefined) => {
    return (
      <Col {...responsiveLayout} key={index}>
        <Form.Item label={item.label} name={item.name} rules={item.rules} initialValue={item.initialValue}>
          {item.type === "Select" ? (
            <item.component
              allowClear
              placeholder={item.placeholder}
              style={{width: "100%", textAlign: "left"}}
              {...item.events}
              maxCount={item?.maxCount}
              mode={item?.mode}
              disabled={item?.disabled}
              maxTagCount={item?.maxTagCount}
            >
              {item.options?.map((option, index) => (
                <item.component.Option key={index} value={option}>
                  {option}
                </item.component.Option>
              ))}
            </item.component>
          ) : item.type === "Cascader" ? (
            <item.component
              disabled={item?.disabled}
              allowClear
              placeholder={item.placeholder}
              style={{width: "100%", textAlign: "left"}}
              options={item.options}
              {...item.events}
            />
          ) : item.type === "Upload" ? (
            <item.component {...item.events}>{item.children}</item.component>
          ) : item.type === "UploadImg" ? (
            <UploadDom></UploadDom>
          ) : (
            <item.component
              allowClear
              type={item?.isType}
              prefix={item?.prefix}
              disabled={item?.disabled}
              placeholder={item.placeholder}
              style={{width: "100%", textAlign: "left"}}
              {...item.events}
            />
          )}
        </Form.Item>
      </Col>
    );
  };

  return (
    <Form form={form} onFinish={values => props.onFinish(values)} {...formItemLayout} className={style.formContainer}>
      {formItems.map(renderFormItem)}
      <Col span={buttonSpan}>
        <Row justify='end'>
          <Form.Item>{buttonDom()}</Form.Item>
        </Row>
      </Col>
    </Form>
  );
});

export default DynamicForms;