import FileRenderer from "@/components/FileRenderer";
import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import { useAuth } from "@/src/contexts/authContext";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { GetForm, GetGallery } from "@/utils";
import { Trash } from "lucide-react";
import { useEffect, useState } from "react";
import { FaPaperclip } from "react-icons/fa";
import { MdClose } from "react-icons/md";

const ItemPendenciaEngenharia = ({
  itemValidacao,
  setSchecklistValidacaoEngenharia,
  indexItem,
  setKeyListItens,
  setHandleSubmits,
  dadosCard,
}: {
  [x: string]: any;
}) => {
  const [imageUrls, setImageUrls] = useState<string[]>([]);
  const [anexos, setAnexos] = useState<File[]>(itemValidacao.anexos || []);
  const [inputKey, setInputKey] = useState(1);

  const { isMobile } = useScreenContext();
  const { usuario } = useAuth();

  const { openGallery, setGallery } = GetGallery();
  const { handleSubmit, ...form } = GetForm();

  useEffect(() => {
    setHandleSubmits((prev: any) => {
      const newHandleSubmits = [...prev];
      newHandleSubmits.splice(indexItem, 1, handleSubmit);
      return newHandleSubmits;
    });
  }, [handleSubmit]);

  useEffect(() => {
    setInputKey(inputKey + 1);

    const loadImages = async () => {
      const newImageUrls = await Promise.all(
        anexos.map(async (anexo) => {
          const reader = new FileReader();
          return new Promise((resolve) => {
            reader.onload = () => resolve(reader.result as string);
            reader.readAsDataURL(anexo);
          }).catch(() => {});
        }),
      );
      setImageUrls(newImageUrls as string[]);
      setGallery(
        newImageUrls.map((newImageUrl, index) => ({
          src: newImageUrl as string,
          name: anexos[index].name?.split("/").pop()!,
        })),
      );
      setSchecklistValidacaoEngenharia((prev: any[]) => {
        const newItens = [...prev];
        newItens.splice(indexItem, 1, {
          ...itemValidacao,
          anexos,
          // caminhos_anexos: anexos.map((anexo: File) => ({
          //   caminho_anexo_item_checklist_engenharia_negocio: `clientes/${dadosCard.cliente?.pasta_cliente}/${dadosCard.id_coleta_cliente}/PendenciaEngenharia/${anexo.name}`,
          // })),
        });

        return newItens;
      });
    };

    loadImages();
  }, [anexos]);

  const handleDownload = (anexo: File) => {
    const url = URL.createObjectURL(anexo);
    const link = document.createElement("a");
    link.href = url;
    link.download = anexo.name;
    link.click();
    URL.revokeObjectURL(url);
  };

  const adicionarAnexo = (event: any) => {
    const inputElement = event.target as HTMLInputElement;

    if (inputElement.files && inputElement.files.length > 0) {
      let arquivo = inputElement.files[0];
      setAnexos((prev) => {
        // if (prev.some((anexo) => anexo.name == arquivo.name)) {
        let nomeArquivo = arquivo.name?.replaceAll("/", "_");
        let extensao = nomeArquivo.substring(nomeArquivo.lastIndexOf("."));
        let nomeBase = nomeArquivo.substring(0, nomeArquivo.lastIndexOf("."));

        let contador = 0;
        let novoNome = nomeArquivo;
        while (prev.some((anexo) => anexo.name === novoNome)) {
          novoNome = `${nomeBase} (${++contador})${extensao}`;
        }
        arquivo = new File([arquivo], novoNome, {
          type: arquivo.type,
          lastModified: arquivo.lastModified,
        });
        // }

        return [...prev, arquivo];
      });

      setInputKey(inputKey + 1);
    }
  };

  return (
    <fieldset
      className="flex flex-col border-black/25 border rounded p-2 px-3 w-full relative"
      style={{ minInlineSize: "unset" }}
    >
      <legend className="font-bold p-2 flex flex-row items-center max-w-[100%]">
        <div className="whitespace-nowrap text-ellipsis truncate">
          {itemValidacao.nome_item_checklist_engenharia}
        </div>
      </legend>
      <div className="w-full flex justify-end absolute top-0 right-0 px-3">
        <Button
          type="button"
          className={"p-2 bg-error text-white"}
          onClick={() => {
            setSchecklistValidacaoEngenharia((prev: any[]) => {
              const newItens = [...prev];
              newItens.splice(indexItem, 1);

              return newItens;
            });
            setHandleSubmits((prev: any) => {
              const newHandleSubmits = [...prev];
              newHandleSubmits.splice(indexItem, 1);
              return newHandleSubmits;
            });
            setKeyListItens((prev: number) => prev + 1);
          }}
        >
          <Trash />
        </Button>
      </div>
      <Input
        name={`observacao_item_checklist_engenharia-${indexItem}`}
        label="Observações"
        formulario={form}
        type="textarea"
        onBlur={(e: any) => {
          setSchecklistValidacaoEngenharia((prev: any[]) => {
            const newItens = [...prev];
            newItens.splice(indexItem, 1, {
              ...itemValidacao,
              observacao_item_checklist_engenharia: e.target.value,
            });

            return newItens;
          });
          setKeyListItens;
        }}
        defaultValue={itemValidacao.observacao_item_checklist_engenharia}
        rows={3}
        required
        error="Faça alguma observação sobre este item"
      />
      <div className="pt-1">
        <div className="flex flex-col gap-1 max-h-[200px] overflow-auto">
          {imageUrls.map((imageUrl, index) => {
            const anexo: File = anexos[index];
            return (
              <div
                key={index}
                className="flex flex-row justify-between px-2 cursor-pointer hover:bg-[rgb(0,0,0)]/[.1] border border-transparent hover:border-black/[0.4] rounded"
                onClick={() => handleDownload(anexo)}
              >
                <div className="w-[400px] overflow-hidden text-ellipsis p-1 flex flex-row items-center gap-1">
                  <figure
                    className="flex flex-col items-center overflow-hidden w-[20%] hover:w-[50%] transition-all"
                    onClick={(e) => {
                      e.stopPropagation();
                      openGallery(index);
                    }}
                  >
                    <FileRenderer
                      src={imageUrl}
                      name={anexo?.name?.split("/").pop()!}
                      className={
                        "h-full w-30 flex flex-col items-center justify-center bg-animate-pulse bg-white rounded overflow-hidden"
                      }
                      width={200}
                    />
                  </figure>
                  {anexo?.name}
                </div>
                <button
                  type="button"
                  onClick={(e) => {
                    e.stopPropagation();
                    setAnexos((prev) => {
                      const newAnexos = [...prev];
                      newAnexos.splice(index, 1);
                      return newAnexos;
                    });
                  }}
                >
                  <MdClose />
                </button>
              </div>
            );
          })}
        </div>
        <label
          // htmlFor="add_anexo"
          htmlFor={indexItem}
          className="justify-center dark:text-white whitespace-nowrap rounded-md font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 text-primary-foreground flex bg-success hover:brightness-90 hover:bg-success justify-self-end text-sm h-fit items-center w-fit m-1 mb-4 p-1 px-2 cursor-pointer"
        >
          <FaPaperclip /> Adicionar Anexo
        </label>
        <input
          // id="add_anexo"
          id={indexItem}
          type="file"
          // accept="image/png, image/gif, image/jpeg"
          className="hidden"
          key={inputKey}
          onInput={(e) => adicionarAnexo(e)}
        />
      </div>
    </fieldset>
  );
};

export default ItemPendenciaEngenharia;