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

export default function FieldsCustosServicoOSInstalador({
  form,
  defaultValues,
  isDisabled,
  ordemServico,

  loja,
  motivosReagendamento,
  instalador,
  valorKm,
  valorHora,
}: any) {
  const [anexos, setAnexos] = useState<File[]>(false || []);
  const [imageUrls, setImageUrls] = useState<string[]>([]);
  const [isLoadingAnexos, setIsLoadingAnexos] = useState(false);
  const [inputKey, setInputKey] = useState(1);

  const [valorServico_execucao_servico, setValorServico_execucao_servico] =
    useState(ordemServico?.valorTerceiroAbertura_pvos);
  const [qtdKm_execucao_servico, setQtdKm_execucao_servico] = useState<
    string | number
  >(defaultValues?.qtdKm_execucao_servico || "0");
  const [qtdHoras_execucao_servico, setQtdHoras_execucao_servico] = useState<
    string | number
  >(defaultValues?.qtdHoras_execucao_servico || "0");

  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 == "2")
          .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(() => {
    form?.setValue(
      "valor_execucao_servico",
      FormatFields.formatarNumero(
        Number(valorServico_execucao_servico) +
          Number(qtdKm_execucao_servico) * (Number(valorKm) || 0) +
          Number(qtdHoras_execucao_servico) * (Number(valorHora) || 0),
      ),
      
    );
    form?.setValue(
      "valorTotalKm_execucao_servico",
      String(
        Number(qtdKm_execucao_servico) *
          (Number(instalador?.valor_km_usuario || loja?.valor_km_loja) || 0),
      ),
    );
    form?.setValue(
      "valorTotalHora_execucao_servico",
      String(
        Number(qtdHoras_execucao_servico) *
          (Number(
            instalador?.valor_hora_adicional_usuario ||
              loja?.valor_hora_adicional_loja,
          ) || 0),
      ),
    );
  }, [
    valorServico_execucao_servico,
    qtdKm_execucao_servico,
    qtdHoras_execucao_servico,
    valorKm,
    valorHora,
  ]);

  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 (
    <Fragment key={form.key}>
      {/* {![null, 0, "0"].includes(ordemServico?.is_externo_usuario) && ( */}
      {true && (
        <>
          <Input
            name="valorServico_execucao_servico"
            label="Valor do Serviço"
            formulario={form}
            mascara="numero"
            prefix={"R$"}
            defaultValue={
              defaultValues?.valorServico_execucao_servico ||
              ordemServico?.valorTerceiroAbertura_pvos ||
              defaultValues?.valor_execucao_servico
            }
            width={"flex-1"}
            onChange={(e) =>
              setValorServico_execucao_servico(
                FormatFields?.desformatarNumeros(e?.target?.value),
              )
            }
            disabled={isDisabled}
          />
          <Input
            name="qtdKm_execucao_servico"
            label="Quilometragem (km)"
            formulario={form}
            mascara="numero"
            defaultValue={defaultValues?.qtdKm_execucao_servico || "0"}
            width={"flex-1"}
            onChange={(e) =>
              setQtdKm_execucao_servico(
                FormatFields?.desformatarNumeros(e?.target?.value),
              )
            }
            disabled={isDisabled}
          />
          <Input
            name="qtdHoras_execucao_servico"
            label="Horas Adicionais"
            formulario={form}
            mascara="numero"
            defaultValue={defaultValues?.qtdHoras_execucao_servico || "0"}
            width={"flex-1"}
            onChange={(e) =>
              setQtdHoras_execucao_servico(
                FormatFields?.desformatarNumeros(e?.target?.value),
              )
            }
            disabled={isDisabled}
          />
          <Input
            name="valor_execucao_servico"
            label="Valor Total"
            formulario={form}
            mascara="numero"
            prefix={"R$"}
            width={"flex-1"}
            disabled
            defaultValue={defaultValues?.valor_execucao_servico}
          />
        </>
      )}
      <Input
        name="obsCustos_execucao_servico"
        label="Observações"
        formulario={form}
        type="textarea"
        defaultValue={
          (defaultValues && defaultValues?.obsCustos_execucao_servico) ||
          ([null, 0, "0"].includes(ordemServico?.is_externo_usuario)
            ? "Pendência Concluída Automaticamente pois o instalador é interno"
            : "")
        }
        disabled={isDisabled}
      />
      {new Date(ordemServico?.dataConclusao_execucao_servico) >
        new Date(ordemServico?.datafinal_servico_pvos) && (
        <div className="w-full border-2 border-orange-500 bg-orange-500/[0.04] rounded p-2 flex flex-col gap-2">
          <div className="font-medium">
            A data informada na baixa indicou um atraso, informe o motivo e
            descição
          </div>
          <div className="flex flex-row flex-wrap gap-4">
            <InputSelectComponent
              name="motivoAtraso_execucao_servico"
              label="Motivo do Atraso"
              options={motivosReagendamento
                ?.filter(
                  (motivo: any) => motivo?.status_motivo_reagendamento == "1",
                )
                ?.map((motivo: any) => ({
                  value: motivo?.id_motivo_reagendamento,
                  label: motivo?.motivo_reagendamento,
                }))}
              formulario={form}
              width={"flex-1"}
              defaultValue={defaultValues?.motivoAtraso_execucao_servico}
              disabled={isDisabled}
            />
            <Input
              name="descricaoAtraso_execucao_servico"
              label="Descrição do atraso"
              formulario={form}
              width={"flex-1"}
              inputClassName="bg-[#fff]"
              defaultValue={defaultValues?.descricaoAtraso_execucao_servico}
              disabled={isDisabled}
            />
          </div>
        </div>
      )}
      <div className="w-full">
        <div>Anexos dos Custos do Serviço</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>
                );
              })
            )}
          </div>
          {!isDisabled && (
            <label
              htmlFor="add_anexo_custos"
              // 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 Anexo
            </label>
          )}
          <input
            id="add_anexo_custos"
            // id={indexItem}
            type="file"
            // accept="image/png, image/gif, image/jpeg"
            className="hidden"
            key={inputKey}
            onInput={(e) => adicionarAnexo(e)}
          />
        </div>
      </div>
    </Fragment>
  );
}