import { useMemo } from "react";
import FormInput from "../FormInput/index";
import FormDatePicker from "../FormDatePicker/index";
import FormTextarea from "../FormTextarea/index";
import FormRadio from "../FormRadio/index";
import FormCheckbox from "../FormCheckbox/index";
import FormImgUpload from "../FormImgUpload/index";
import FormFileUpload from "../FormFileUpload/index";
import Group from "../Group";
interface RenderComponentProps {
  config?: any;
  onChange?: (value: any) => void;
  value?: any;
  componentType: any;
  /** 原始信息 */
  metaData?: any;
}

const RenderComponent = (props: RenderComponentProps) => {
  const { config, componentType, metaData, ...newProps } = props;

  const componentsRegister = useMemo(() => {
    const composeProps = { ...newProps, ...config, metaData: metaData };

    switch (componentType) {
      case "TextInput":
        return <FormInput {...composeProps} />;
      case "Branch":
        return <Group {...composeProps}></Group>;
      case "NumberInput":
        return <FormInput {...composeProps}></FormInput>;
      case "DatePicker":
        return <FormDatePicker {...composeProps}></FormDatePicker>;
      case "TextAreaInput":
        return <FormTextarea {...composeProps}></FormTextarea>;
      case "Radio":
        return <FormRadio {...composeProps}></FormRadio>;
      case "Checkbox":
        return <FormCheckbox {...composeProps}></FormCheckbox>;
      case "FileUpload":
        return <FormFileUpload {...composeProps}></FormFileUpload>;
      case "ImgUpload":
        return <FormImgUpload {...composeProps}></FormImgUpload>;
      case "PhoneInput":
        return <FormInput {...composeProps} />;
      default:
        return <></>;
    }
  }, [props]);

  return componentsRegister;
};

export default RenderComponent;
