/* eslint-disable react/jsx-no-comment-textnodes */
import * as React from 'react';
import { FastForm, FastRow, FastCol } from "components/ui";

import FormItem from "components/business/Form/FormItem";
import Input from "components/business/Form/FormItem/Input";
import Select from "components/business/Form/FormItem/Select";
import Radio from "components/business/Form/FormItem/Radio";
import Switch from "components/business/Form/FormItem/Switch";
import Checkbox from "components/business/Form/FormItem/Checkbox";
import DatePicker from "components/business/Form/FormItem/DatePicker";
import TreeSelect from "components/business/Form/FormItem/TreeSelect";
import Tags from "components/business/Form/FormItem/Tags";
import AutoComplete from "components/business/Form/FormItem/AutoComplete";
import UploadImg from "components/business/Form/FormItem/UploadImg";
import UploadFile from "components/business/Form/FormItem/UploadFile";
import Cascader from "components/business/Form/FormItem/Cascader";
import DateRangePicker from "components/business/Form/FormItem/DateRangePicker";
import { findLabel } from "utils/tool";
import useForm from "./useForm";
import { FormTypes } from "./types";

const COMP_MAP = {
  span: AutoComplete,
  suggest: AutoComplete,
  input: Input,
  multinput: Input,
  inputnumber: Input,
  select: Select,
  multselect: Select,
  tags: Tags,
  radio: Radio,
  switch: Switch,
  checkbox: Checkbox,
  datepicker: DatePicker,
  treeselect: TreeSelect,
  multtreeselect: TreeSelect,
  uploadimage: UploadImg,
  uploadfile: UploadFile,
  multuploadimage: UploadImg,
  cascader: Cascader,
  multcascader: Cascader,
  daterangepicker: DateRangePicker,
};

const INITIAL_ITEM_CONFIG = {
  labelLayout: 8,
  contentLayout: 16,
};

function Form(props: FormTypes.FormProps) {
  const {
    formInstance,
    initialValues,
    formList,
    actionList,
    values,
    dict,
    setValues,
    createActionBtns,
  } = useForm(props);

  const createSonField = () => {
    const result = [];
    for (let i = 0; i < formList.length; i += 1) {
      const item = {
        ...INITIAL_ITEM_CONFIG,
        ...formList[i],
      };
      const COMP = COMP_MAP[item.type];
      if (item.type === "separate") {
        result.push(
          <div
            key={i}
            className="mb-8 bg-greyF8 border-radius-8 p-8 align-center"
          >
            {item.label}
          </div>
        );
      } else if (item.type === "span") {
        const spanValue = item.alias
          ? findLabel(values[item.key], dict[item.alias])
          : values[item.key];
        result.push(
          <FormItem key={i} config={item} values={values}>
            <span
              // eslint-disable-next-line react/no-danger
              dangerouslySetInnerHTML={{ __html: `${spanValue || ""}` }}
            />
          </FormItem>
        );
      } else if (item.type === "hidden") {
        result.push(null);
      } else if (!COMP) {
        result.push(
          <FormItem key={i} config={item} values={values}>
            <div>这里是错误类型</div>
          </FormItem>
        );
      } else {
        result.push(
          <FormItem key={i} config={item} values={values} dict={dict}>
            <COMP />
          </FormItem>
        );
      }
    }

    return result;
  };

  return (
    <FastForm
      form={formInstance}
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      onValuesChange={(_value: any, _values: any) => {
        setValues({ ...values, ..._value });
      }}
      initialValues={initialValues}
    >
      {formList.length > 10 ? (
        <FastRow>
          <FastCol span={11}>{createSonField().slice(0, 12)}</FastCol>
          <FastCol span={11} offset={2}>
            {createSonField().slice(12)}
          </FastCol>
        </FastRow>
      ) : (
        <div>{createSonField()}</div>
      )}
      <div className="flex flex-right">{createActionBtns(actionList)}</div>
    </FastForm>
  );
}

export default Form;