import useCurrentLanguage from "@/hooks/useCurrentLanguage";
import { UseFormReturn } from "react-hook-form";
import {
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "./form";
import { InputComp } from "./inputComp";
import TranslateClient from "./localization/TranslateClient";

type Props = {
  form: UseFormReturn<any, any, undefined>;
  placeholder?: string;
  name: string;
  label?: string;
  type?: "text" | "password" | "email" | "number" | "tel" | "file";
  className?: string;
  required?: boolean;
};
const Input = ({
  form,
  placeholder,
  name,
  label,
  type = "text",
  className,
  required,
}: Props) => {
  const error = form.formState.errors?.[name];
  const { locale } = useCurrentLanguage();
  return (
    <FormField
      control={form.control}
      name={name}
      render={({ field }) => (
        <FormItem>
            <div>
              <FormLabel>{<TranslateClient text={label || name} />}</FormLabel>
              {required && <span className="text-red-600"> *</span>}
            </div>
          <FormControl>
            <>
              <InputComp
                placeholder={locale?.[`${[placeholder]}` || name]}
                {...field}
                type={type}
                className={`rtl:dir-rtl [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none ${
                  className ? className : ""
                } ${error ? "outline-red-500 outline outline-[1px]" : ""}`}
              />
              {error ? (
                <div className="text-red-500">{String(error?.message)}</div>
              ) : null}
            </>
          </FormControl>
          <FormMessage />
        </FormItem>
      )}
    />
  );
};

export default Input;