import { UploadCloud } from "lucide-react";
import React, { useEffect, useState } from "react";
import { BsTrash3Fill } from "react-icons/bs";
import ModalComponente from "../Modal/ModalComponente";

interface InputImgProps {
  onInputEvent?: any;
  defaultImg?: string | undefined;
  typeFile?: string | undefined;
  onRemoveFile?: Function;
  isImportScreen?: boolean;
}

const InputImg: React.FC<InputImgProps> = ({
  onInputEvent,
  typeFile = null,
  defaultImg,
  onRemoveFile,
}) => {
  const [image, setImage] = useState<any>(null);
  const [modal, setModal] = useState(false);
  const [hovered, setHovered] = useState(false);

  useEffect(() => {
    if (defaultImg) {
      const base64String = defaultImg.includes(",")
        ? defaultImg.split(",")[1]
        : defaultImg;
      const byteCharacters = atob(base64String);
      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: typeFile != null ? typeFile : "image/*",
      });
      const file = new File([blob], "nome-do-arquivo.png", {
        type: typeFile != null ? typeFile : "image/*",
      });

      handleReadImage(file);
    }
  }, [defaultImg]);

  const handleReadImage = (file: File) => {
    const reader = new FileReader();
    reader.onloadend = () => {
      const newImage = {
        id: Date.now(),
        src: reader.result,
        name: file?.name,
      };
      setImage(newImage);
    };
    reader.readAsDataURL(file);
  };

  const handleFileChange = (e: any) => {
    const target = e.target;
    if (target.files && target.files.length > 0) {
      handleReadImage(target.files[0]);
    }
  };

  const handleMouseEnter = () => setHovered(true);
  const handleMouseLeave = () => setHovered(false);

  const handleDeleteImage = () => {
    setImage(null);
    if (onRemoveFile) onRemoveFile();
  };

  function renderDragFilesArea() {
    return (
      <div className="drag-file-area">
        <label className="label">
          <span className="browse-files">
            <div className="flex justify-center">
              <UploadCloud height={60} className="w-9" />
            </div>
            <p className="dynamic-message text-lg">
              Arraste e solte qualquer arquivo aqui
            </p>
            ou{" "}
            <input
              id="fileInput"
              type="file"
              multiple={true}
              onChange={handleFileChange}
              className="default-file-input w-[300px]"
              accept={typeFile != null ? typeFile : "image/*"}
              onInput={onInputEvent}
            />
            <span className="browse-files-text">abra arquivos </span>
            <span>do computador</span>
          </span>
        </label>
      </div>
    );
  }

  return (
    <>
      <div className="flex items-center justify-center w-full">
        <label
          htmlFor="dropzone-file"
          className="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
        >
          <div className="flex flex-col items-center justify-center py-2">
            {image ? (
              <div
                className="relative flex items-center justify-center w-full h-full"
                onMouseEnter={handleMouseEnter}
                onMouseLeave={handleMouseLeave}
              >
                <figure
                  // onClick={() => {
                  //   setModal(!modal);
                  // }}
                  className="relative overflow-hidden p-2"
                >
                  <ModalComponente
                    hasForm={false}
                    header={"Imagem"}
                    opened={modal}
                    onClose={() => setModal(!modal)}
                    hasSaveButton={false}
                  >
                    <div className="flex justify-center items-center p-4">
                      <img
                        alt=""
                        width={600}
                        height={500}
                        className="object-contain"
                        src={image.src}
                      />
                    </div>
                  </ModalComponente>
                  <div>{image?.name}</div>
                  {image?.src?.includes("data:application/pdf;base64,") ? (
                    // <PDFViewer pdfUrl={image?.src} />
                    <iframe src={image?.src} width={"100%"} height={"100%"} />
                  ) : (
                    <img
                      src={image.src}
                      alt="Arquivo Selecionado"
                      className={`w-70 h-60 object-contain ${
                        hovered ? "brightness-50" : ""
                      } rounded`}
                    />
                  )}

                  {hovered && (
                    <BsTrash3Fill
                      className="absolute top-2 right-2 text-danger z-10 cursor-pointer"
                      onClick={handleDeleteImage}
                      size={30}
                    />
                  )}
                </figure>
              </div>
            ) : (
              renderDragFilesArea()
            )}
          </div>
        </label>
      </div>
    </>
  );
};

export default InputImg;