import LoaderSun from "@/components/common/Loader/LoaderSun";
import FileRenderer from "@/components/FileRenderer";
import Input from "@/components/Forms/Input";
import { baixarAwsBase64 } from "@/requests/common/Aws/baixarAws";
import { getDateBrasil, GetGallery, handleDownload } from "@/utils";
import { useEffect, useState } from "react";
import { FaPaperclip } from "react-icons/fa";
import { MdClose } from "react-icons/md";

export default function FieldsBaixaOSInstalador({
  form,
  defaultValues,
  isDisabled,
}: any) {
  const [anexos, setAnexos] = useState<File[]>(false || []);
  const [imageUrls, setImageUrls] = useState<string[]>([]);
  const [isLoadingAnexos, setIsLoadingAnexos] = useState(false);
  const [inputKey, setInputKey] = useState(1);

  const { openGallery, setGallery } = GetGallery();

  useEffect(() => {
    if (defaultValues && defaultValues["anexos_data"]) {
      const anexos_data = defaultValues["anexos_data"];

      setIsLoadingAnexos(true);
      Promise.all(
        anexos_data
          ?.filter((anexo: any) => anexo?.tipoAnexo_os_pvos == "1")
          .map((data: any) =>
            baixarAwsBase64(data["caminho_arq_pvos"]).then((res) => {
              const resultObject =
                typeof res === "string" ? JSON.parse(res) : res;
              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 = data["caminho_arq_pvos"].split("/").pop();
              const file = new File([blob], fileName, { type: blob.type });
              (file as any).id = data?.id_arq_pvos;
              return file;
            })
          )
      )
        .then((res) => {
          setAnexos(res);
        })
        .finally(() => setIsLoadingAnexos(false));
    }
  }, []);

  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()!,
        }))
      );
      form.clearErrors("anexos");
      // 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}/CompraMaterial/${anexo.name}`,
      //     })),
      //   });

      //   return newItens;
      // });
      form?.setValue("anexos", anexos);
    };

    loadImages();
  }, [anexos]);

  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;
    //       let extensao = nomeArquivo.substring(nomeArquivo.lastIndexOf("."));
    //       let nomeBase = nomeArquivo.substring(0, nomeArquivo.lastIndexOf("."));

    //       let contador = 0;
    //       let novoNome = nomeArquivo;
    //       while (anexos.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);
    // }
    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 (
    <>
      <Input
        name="dataConclusao_execucao_servico"
        label="Data da Conclusão do Serviço"
        type="date"
        formulario={form}
        // width={"flex-1"}
        width={"w-fit"}
        required
        error={"Informe a data da Conclusão do Serviço"}
        defaultValue={
          defaultValues?.dataConclusao_execucao_servico ||
          getDateBrasil(undefined, undefined, "fr-CA")
        }
        disabled={isDisabled}
      />

      <Input
        name="obs_execucao_servico"
        label="Observações"
        formulario={form}
        type="textarea"
        defaultValue={defaultValues?.obs_execucao_servico}
        disabled={isDisabled}
      />

      <div>
        <div>Anexos da Execução OS</div>
        <div className="pt-1">
          <div className="flex flex-col gap-1 max-h-[200px] overflow-auto">
            {isLoadingAnexos ? (
              <div className="flex justify-center items-center">
                <LoaderSun height={100} />
              </div>
            ) : (
              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>
                    {!isDisabled && (
                      <button
                        type="button"
                        onClick={(e) => {
                          e.stopPropagation();
                          setAnexos((prev) => {
                            const newAnexos = [...prev];
                            newAnexos.splice(index, 1);
                            return newAnexos;
                          });
                        }}
                      >
                        <MdClose />
                      </button>
                    )}
                  </div>
                );
              })
            )}
            {form?.errors &&
              "anexos" &&
              (form.errors as any)["anexos"] &&
              (form.errors as any)["anexos"]?.message && (
                <span className="text-danger text-sm">
                  {/* {(form.errors as any)["anexos"].message} */}
                  {(form.errors as any)["anexos"]?.message
                    .split(" ")
                    .map((str: string) =>
                      str.length > 3 ? str[0].toUpperCase() + str.slice(1) : str
                    )
                    .join(" ")}
                </span>
              )}
          </div>
          {!isDisabled && (
            <label
              htmlFor="add_anexo_baixa"
              // 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 text-sm h-fit items-center w-fit m-1 mb-4 p-1 px-2 cursor-pointer"
            >
              <FaPaperclip /> Adicionar Documento
            </label>
          )}
          <input
            id="add_anexo_baixa"
            // id={indexItem}
            type="file"
            // accept="image/png, image/gif, image/jpeg"
            className="hidden"
            key={inputKey}
            onInput={(e) => adicionarAnexo(e)}
          />
        </div>
      </div>
    </>
  );
}