import { useEffect } from "react";
import { UseFormReturn } from "react-hook-form";
import ButtonElement from "./fields/button";
import CheckboxElement from "./fields/checkbox";
import DynamicElement from "./fields/dynamic";
import FileElement from "./fields/file";
import GenericElement from "./fields/generic";
import GroupElement from "./fields/group";
import IconElement from "./fields/icon";
import LabelElement from "./fields/label";
import TextAreaElement from "./fields/textarea";

export const RenderElement = ({ element, form, index, upperLabel = false }) => {
  switch (element.type) {
    case "label": {
      return <LabelElement {...{ element }} />;
    }
    case "group": {
      return <GroupElement {...{ form, element, upperLabel }} />;
    }
    case "dynamic": {
      return <DynamicElement {...{ form, element, upperLabel }} />;
    }
    case "icon": {
      return <IconElement {...{ form, element, upperLabel }} />;
    }
    case "text":
    case "email":
    case "password": {
      return <GenericElement {...{ form, element, upperLabel }} />;
    }
    case "textarea": {
      return <TextAreaElement {...{ form, element, upperLabel }} />;
    }
    case "file": {
      return <FileElement {...{ form, element, upperLabel }} />;
    }
    case "checkbox": {
      return <CheckboxElement {...{ form, element }} />;
    }
    case "button":
    case "submit":
    case "reset": {
      return <ButtonElement {...{ form, element }} />;
    }
    default:
      return null;
  }
};

type FormBuilderProps = {
  form: UseFormReturn<any>;
  elements: any;
  fileChange?: (e: any) => void;
  upperLabel?: boolean;
};

export const FormBuilder = ({
  form,
  elements,
  upperLabel = false,
}: FormBuilderProps) => {
  useEffect(() => {
    form.trigger();
  }, [form.trigger]);

  return (
    <div className="flex w-full flex-wrap gap-4">
      {elements.map((element, index) => (
        <RenderElement key={index} {...{ element, form, index, upperLabel }} />
      ))}
    </div>
  );
};