import Tooltip from "@/components/Tooltip";
import { FormControl, FormField, FormLabel } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";
import {
  FormBuilderBaseElement,
  FormBuilderGenericElement,
} from "@/types/app-component-formbuilder";
import { faCheck, faInfoCircle } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { UseFormReturn } from "react-hook-form";
import { TooltipContent } from "./_tooltip";

type GenericElementProps = {
  form: UseFormReturn<any>;
  element: FormBuilderBaseElement &
    FormBuilderGenericElement<Record<string, any>>;
};
export default function GenericElement({ form, element }: GenericElementProps) {
  const { invalid, error } = form.getFieldState(element.name);

  return (
    <FormField
      control={form.control}
      name={element.name}
      render={({ field }) => (
        <FormControl>
          <div
            className={cn("relative flex flex-col gap-1", element.className)}
          >
            <div>
              <div className="flex items-center justify-between">
                <FormLabel
                  className={cn("text-gray-500")}
                  htmlFor={element.name}
                >
                  {element.label}{" "}
                  {element.required && <span className="text-red-500">*</span>}
                </FormLabel>
              </div>
            </div>
            <div className="relative flex">
              {element.icon && (
                <div className="absolute left-0 flex aspect-square h-full items-center justify-center border-r border-neutral-200 px-2 text-gray-500">
                  <FontAwesomeIcon icon={element.icon} />
                </div>
              )}
              <Input
                className={cn("peer text-ellipsis pr-10", {
                  "pl-10": element.icon,
                })}
                placeholder={element.placeholder ?? ""}
                type={element.type}
                id={element.name}
                value={form.watch(element.name) ?? element.placeholder ?? " "}
                disabled={element.disabled}
                {...field}
              />
              {
                <Tooltip
                  light
                  side="bottom"
                  align="end"
                  className="w-[236px]"
                  content={
                    element.errors && (
                      <TooltipContent error={error} list={element.errors} />
                    )
                  }
                >
                  <p
                    className={cn(
                      "absolute right-0 flex aspect-square h-full items-center justify-center px-2",
                      invalid ? "text-gray-500" : "text-emerald-600",
                    )}
                  >
                    <FontAwesomeIcon icon={invalid ? faInfoCircle : faCheck} />
                  </p>
                </Tooltip>
              }
            </div>
            {element.description}
          </div>
        </FormControl>
      )}
    />
  );
}