import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card";
import { baixarAws, baixarAwsBase64 } from "@/requests/common/Aws/baixarAws";
import {} from "@mui/material";
import React, { useEffect, useRef, useState } from "react";

interface AvatarInputProps {
  imageValue?: string;
  formImage?: (file: any) => void | undefined;
  viewOnly?: boolean;
  width?: string;
  height?: string;
  nome_responsavel?: string;
  cargo_responsavel?: any;
  id_usuario?: any;
  hover?: boolean;
}
const globalImageCache = new Map<string, string>();

const AvatarInput = ({
  imageValue,
  formImage,
  viewOnly = true,
  width = "40",
  height = "40",
  nome_responsavel,
  id_usuario,
  cargo_responsavel,
  hover,
}: AvatarInputProps) => {
  const [imageSrc, setImageSrc] = useState<any>();
  const [keyImage, setKeyImage] = useState<any>();
  const imageCache = useRef<Map<string, string>>(new Map());
  const handleImageChange = (event: any) => {
    const file = event?.target?.files[0];
    if (file) {
      const reader: any = new FileReader();
      reader.onloadend = () => {
        setImageSrc(reader.result);
        setKeyImage(keyImage + 1);
      };
      reader.readAsDataURL(file);
    }
    if (typeof formImage === "function") {
      formImage(file);
    }
  };

  useEffect(() => {
    if (!viewOnly) {
      const fetchImage = async () => {
        if (imageValue && imageValue !== "undefined") {
          if (globalImageCache.has(imageValue)) {
            setImageSrc(globalImageCache.get(imageValue));
            return;
          }

          const result = await baixarAwsBase64(imageValue);
          const resultObject =
            typeof result === "string" ? JSON.parse(result) : result;
          const base64Content = resultObject.base64;
          const dataUri = `data:image/png;base64,${base64Content}`;

          globalImageCache.set(imageValue, dataUri); // SALVA NO CACHE GLOBAL
          setImageSrc(dataUri);
        }
      };
      fetchImage();
    } else {
      try {
        if (imageValue == "placeholder") {
          return setImageSrc(
            "data:image/png;base64,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"
          );
        } else {
          setImageSrc(undefined);
        }
        const inputElement = document.getElementById("profileInput");
        if (imageValue) {
          if (inputElement) {
            baixarAwsBase64(imageValue).then((result) => {
              const resultObject =
                typeof result === "string" ? JSON.parse(result) : result;
              const base64Content = resultObject.base64;

              const byteCharacters = atob(base64Content);
              const byteNumbers = new Array(byteCharacters.length);
              for (let i = 0; i < byteCharacters.length; i++) {
                byteNumbers[i] = byteCharacters.charCodeAt(i);
              }
              const byteArray = new Uint8Array(byteNumbers);
              const blob = new Blob([byteArray], {
                type: "application/octet-stream",
              });

              const fileName = imageValue.split("/").pop();
              if (fileName) {
                const file = new File([blob], fileName, { type: blob.type });

                if (formImage) {
                  formImage(file);
                }
                const dataTransfer = new DataTransfer();
                dataTransfer.items.add(file);

                Object?.defineProperty(inputElement, "files", {
                  value: dataTransfer.files,
                  writable: false,
                });
                return handleReadImage(inputElement);
              }
            });
          } else {
            if (globalImageCache.has(imageValue)) {
              setImageSrc(globalImageCache.get(imageValue));
            } else {
              baixarAws(imageValue).then((res: any) => {
                if (res !== "O arquivo não existe") {
                  globalImageCache.set(imageValue, res); // Salva no cache
                  setImageSrc(res);
                }
              });
            }
          }
        } else {
          setImageSrc("");
        }
      } catch (err) {
        console.error("err", err);
      }
    }
  }, [imageValue]);

  const handleReadImage = (target: any) => {
    const file = target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setImageSrc(reader.result);
      };
      reader.readAsDataURL(file);
    }
  };

  return (
    <HoverCard open={hover}>
      <div className="text-center">
        <HoverCardTrigger>
          <label className={`relative`}>
            {!viewOnly && (
              <input
                id="profileInput"
                type="file"
                className="hidden"
                onChange={handleImageChange}
              />
            )}
            <figure
              className={`relative w-${width} h-${height} rounded-full overflow-hidden flex items-center justify-center bg-gray-300`}
            >
              {imageSrc ? (
                <img
                  key={keyImage}
                  src={imageSrc}
                  className={`rounded-full shadow transition-all duration-300 ease-in-out ${viewOnly ? "cursor-pointer" : "cursor-pointer hover:shadow-lg"} hover:bg-opacity-50 `}
                  style={{ width: "100%", height: "100%", objectFit: "cover" }}
                  alt="avatar"
                />
              ) : (
                <span
                  className={`flex justify-center items-center bg-primary w-${width} h-${height} font-medium cursor-pointer p-1 rounded-full text-xs text-white text-center`}
                >
                  {nome_responsavel?.substring(0, 2).toUpperCase()}
                </span>
              )}
              {!viewOnly && imageSrc === "" && (
                <figcaption className="absolute inset-0 flex items-center justify-center rounded-full bg-black bg-opacity-0 transition-all duration-300 ease-in-out hover:bg-opacity-50">
                  <img
                    src="https://raw.githubusercontent.com/ThiagoLuizNunes/angular-boilerplate/master/src/assets/imgs/camera-white.png"
                    className="w-10 h-10"
                    alt="camera icon"
                  />
                </figcaption>
              )}
            </figure>
          </label>
        </HoverCardTrigger>
        <HoverCardContent className="text-center text-base max-sm:hidden px-1 py-2">
          <div className="text-center text-base px-4 py-2 border border-gray-300 rounded-lg bg-gray-50 shadow-lg">
            <div className="text-sm font-bold text-gray-700">
              {cargo_responsavel}
            </div>
            <div className="text-lg font-medium text-gray-900 mt-1">
              {nome_responsavel}
            </div>
          </div>
        </HoverCardContent>
      </div>
    </HoverCard>
  );
};

export default React.memo(AvatarInput);