import { FormControl, FormField, FormItem } from "@/components/ui/form";
import TranslateClient from "@/components/ui/localization/TranslateClient";
import { images } from "@/lib/images";
import Image from "next/image";
import { useEffect, useState } from "react";
import { UseFormReturn } from "react-hook-form";

type Props = {
  form: UseFormReturn<any, any, undefined>;
  name: string;
  id: string;
  label?: string;
  className?: string;
  imageToShow?: string;
};
const InputImage = ({ form, name, id, imageToShow, className }: Props) => {
  const error = form.formState.errors?.[name];
  // const { locale } = useCurrentLanguage()
  const [imagePreview, setImagePreview] = useState(null);

  const imageFile = form.watch("image");

  useEffect(() => {
    if (imageFile && imageFile[0]) {
      const file = imageFile[0];
      form.setValue("image", file);
      const reader = new FileReader();

      reader.onloadend = () => {
        setImagePreview(reader.result);
      };
      reader.readAsDataURL(file);
    } else {
      setImagePreview(null);
    }
  }, [imageFile]);

  return (
    <FormField
      control={form.control}
      name={name}
      render={({ field }) => (
        <FormItem>
          <label
            htmlFor={id}
            className="inline-block h-[140px] rounded-full group"
          >
            <Image
              className={`w-[140px] h-[140px] object-cover rounded-full border ${
                error ? "border-red-500" : "border-mainBlue"
              }`}
              src={imagePreview || imageToShow || images.profile}
              alt="logo"
              width={140}
              height={140}
            />
            <div className="w-[140px] h-[140px] rounded-full border -translate-y-full opacity-0 group-hover:opacity-100 bg-black bg-opacity-25 flex items-center justify-center text-white cursor-pointer">
              <TranslateClient text="edit" />
            </div>
          </label>
          {/* <FormLabel>
                                {<TranslateClient text={label || name} />}
                            </FormLabel> */}

          <FormControl>
            <input
              className="hidden"
              id={id}
              type="file"
              accept="image/*"
              {...form.register("image")}
            />
          </FormControl>
        </FormItem>
      )}
    />
  );
};

export default InputImage;

// ---------------------------
{
  /* <label htmlFor="image">
    <Image
        className="w-[140px] h-[140px] border border-mainBlue rounded-full"
        src={images.profile}
        alt="logo"
        width={140}
        height={140}
    />
</label>
<input
    className="hidden"
    form={form}
    name="image"
    type="text"
    id="image"
    type="file"
    accept="image/*"
/> */
}
// ---------------------------