import LoaderSun from "@/components/common/Loader/LoaderSun";
import Button from "@/components/Forms/Button";
import ModalComponente from "@/components/Modal/ModalComponente";
import { baixarAwsContent } from "@/requests/common/Aws/baixarAws";
import { obterAgendamentoInstalacaoNegocio } from "@/requests/CRM/AgendamentosInstalacoes/obterAgendamentoInstalacaoNegocio";
import { obterAgendamentoManutencao } from "@/requests/CRM/AgendamentosManutencoes/obterAgendamentoManutencao";
import { obterTemplateContrato } from "@/requests/CRM/Contrato/obterTemplateContrato";
import { listarResponsabilidadesFinanceiras } from "@/requests/CRUD/ResponsabilidadesFinanceiras/listarResponsabilidadesFinanceiras";
import { getDateBrasil, GetForm } from "@/utils";
import { useEffect, useState } from "react";
import { FieldValues } from "react-hook-form";
import VisualizarDocGerado from "../documentos_gerados/visualizacaoDocumentoGerado";
import FieldsBaixaOSInstalador from "./FieldsBaixaOSInstalador";
import FormTemplateGeracaoOS from "./FormTemplateGeracaoOS";
import SignaturePad from "./SignaturePad";

const FormBaixaOSInstalador = ({
  onSubmitFunction,
  dadosCard,
  children,
  usuarios,

  defaultValues,
  dadosCliente,
  proposta,

  contrato,
  reloadOrdensServico,
  buscaPropostas,
  compareActiveStep,
  setActiveStepAtual,
  activeStep,
  stepsTemp,
  setDadosNegocio,

  ordensServico,
  ordemServico,

  isDisabled,
  botoes,
  lojas,
  tipoServicoName,
  ...rest
}: {
  [x: string]: any;
  // setActiveStepAtual: Dispatch<any>;
}) => {
  const [agendamento, setAgendamento] = useState<any>();
  const [responsabilidaesFinanceiras, setResponsabilidaesFinanceiras] =
    useState<any[]>([]);
  const [isLoaded, setIsLoaded] = useState(false);

  // const [anexos, setAnexos] = useState<File[]>(false || []);
  // const [imageUrls, setImageUrls] = useState<string[]>([]);
  // const [isLoadingAnexos, setIsLoadingAnexos] = useState(false);
  // const [inputKey, setInputKey] = useState(1);
  const [templateOS, setTemplateOS] = useState("");
  const [isLoadingTemplateOS, setIsLoadingTemplateOS] = useState(true);
  const [dataFormGeracaoOS, setDataFormGeracaoOS] = useState<any>();
  const [step, setStep] = useState(0);

  const [isLoading, setIsLoading] = useState<any[] | undefined>(undefined);
  const [png, setPng] = useState("");

  const [pdf, setPdf] = useState<any>();

  const [responsabilidaeFinanceira, setResponsabilidaeFinanceira] =
    useState<any>();

  const [isOpenOSView, setIsOpenOSView] = useState(false);

  const { handleSubmit, ...form } = GetForm();
  // const { openGallery, setGallery } = GetGallery();
  // const { valuesSession } = useAuth();
  // const { session } = valuesSession();
  // const { reListarDadosKanban } = useKanbanContext();

  const onSubmitFormBaixaOSInstalador = (data: FieldValues) => {
    let error = false;
    if ([0, undefined].includes(data?.anexos?.length)) {
      form?.setError("anexos", {
        type: "manual",
        message: "Mínimo 1 anexo",
      });
      error = true;
    }

    if (!png) {
      form?.setError("assinatura", {
        type: "manual",
        message: "Desenhe a assinatura",
      });
      error = true;
    }

    setDataFormGeracaoOS({
      ...data,
      // data_servico_pvos: agendamento?.data_manutencao,
      // datafinal_servico_pvos: agendamento?.data_final_manutencao_formatada,
      // datafinal_servico_pvos: {
      //   query: `DATE_ADD('${agendamento?.data_manutencao}', INTERVAL ${agendamento?.dias_manutencao} DAY)`,
      // },
      // anexos,
      caminhos_anexos: data?.anexos?.map((anexo: File) => ({
        cod_os_pvos: ordemServico?.id_pvos,
        caminho_arq_pvos: `clientes/${dadosCliente?.pasta_cliente}/${dadosCard?.id_coleta_cliente}/OrdensServico/anexosBaixaInstalador/${anexo.name}`,
        nome_arq_pvos: anexo.name,
        tipoAnexo_os_pvos: "1",
      })),
      assinatura: png,
    });
    if (!error) {
      setStep(1);
    }
    // return onSubmitFunction(data);
  };

  // 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);
  //   }
  // };

  useEffect(() => {
    if (!agendamento) {
      Promise.all([
        (tipoServicoName == "instalacao"
          ? obterAgendamentoInstalacaoNegocio
          : obterAgendamentoManutencao)(dadosCard.id_coleta_cliente).then(
          (res) => {
            const [year, month, day] = res?.[`data_${tipoServicoName}`]
              .split("-")
              .map(Number);
            const data = new Date(year, month - 1, day);

            // const dataFormat = format(data, "dd/MM/yyyy");
            const dataFormat = getDateBrasil(undefined, data);
            data.setDate(data.getDate() + Number(res?.[`dias_${tipoServicoName}`]));
            const dataFinal = getDateBrasil(undefined, data);
            setAgendamento({
              ...res,
              [`data_${tipoServicoName}_formatada`]: dataFormat,
              [`data_final_${tipoServicoName}_formatada`]: dataFinal,
            });
          }
        ),
        listarResponsabilidadesFinanceiras().then((res) =>
          setResponsabilidaesFinanceiras(res)
        ),
      ]).finally(() => setIsLoaded(true));
    } else {
      setIsLoaded(true);
    }

    // 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 });
    //           return file;
    //         })
    //       )
    //   )
    //     .then((res) => {
    //       setAnexos(res);
    //     })
    //     .finally(() => setIsLoadingAnexos(false));
    // }

    obterTemplateContrato({
      id_tipo_negocio: dadosCard.tipoNegocio_coleta,
      id_loja: dadosCard.id_loja_coleta,
    })
      .then((res) =>
        baixarAwsContent(res?.caminho_templateOS_loja).then((templateString) =>
          setTemplateOS(templateString)
        )
      )
      .finally(() => {
        setIsLoadingTemplateOS(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;
  //     // });
  //   };

  //   loadImages();
  // }, [anexos]);

  useEffect(() => {
    if (png) {
      form.clearErrors("assinatura");
    }
  }, [png]);

  return isLoaded ? (
    <>
      <section
        // onSubmit={handleSubmit(onSubmitFormBaixaOSInstalador)}
        className={`flex flex-col gap-5 ${step !== 0 && "hidden"}`}
        {...rest}
      >
        {/* <div
          onClick={() => console.log(dadosCard)}
          className="flex flex-row flex-wrap justify-center gap-3"
        >
          <div>
            <div className="flex flex-row justify-center">Instalador</div>
            <div
              className="font-semibold"
              // onClick={() => console.log(agendamento)}
            >
              {agendamento?.instaladores?.[0]?.nome_usuario}
            </div>
          </div>
          <div>
            <div className="flex flex-row justify-center">Data Inicial</div>
            <div className="font-semibold">
              {agendamento?.data_manutencao_formatada}
            </div>
          </div>
          <div>
            <div className="flex flex-row justify-center">Data Final</div>
            <div className="font-semibold">
              {agendamento?.data_final_manutencao_formatada}
            </div>
          </div>
        </div> */}
        <div>
          <Button
            type="button"
            variant="secondary"
            onClick={() => setIsOpenOSView(true)}
          >
            Visualizar OS
          </Button>
          {isOpenOSView && (
            <ModalComponente
              hasForm={false}
              header={`Dados da Ordem de Serviço Nº: ${ordemServico.id_pvos}`}
              opened={isOpenOSView}
              onClose={() => {
                setIsOpenOSView(false);
              }}
              hasSaveButton={false}
            >
              <VisualizarDocGerado caminho={ordemServico?.caminho_os_pvos} />
            </ModalComponente>
          )}
        </div>
        <div className="flex flex-row flex-wrap gap-3">
          <FieldsBaixaOSInstalador
            form={form}
            defaultValues={defaultValues}
            isDisabled={isDisabled}
          />
          {/* <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
                        .split(" ")
                        .map((str: string) =>
                          str.length > 3
                            ? str[0].toUpperCase() + str.slice(1)
                            : str
                        )
                        .join(" ")}
                    </span>
                  )}
              </div>
              {!isDisabled && (
                <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 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"
                // id={indexItem}
                type="file"
                // accept="image/png, image/gif, image/jpeg"
                className="hidden"
                key={inputKey}
                onInput={(e) => adicionarAnexo(e)}
              />
            </div>
          </div> */}
          {!isDisabled && (
            <div className="w-full">
              <div>Assinatura</div>
              <SignaturePad setPng={setPng} />
              {form?.errors &&
                "assinatura" &&
                (form.errors as any)["assinatura"] &&
                (form.errors as any)["assinatura"]?.message && (
                  <span className="text-danger text-sm">
                    {/* {(form.errors as any)["assinatura"].message} */}
                    {(form.errors as any)["assinatura"]?.message
                      .split(" ")
                      .map((str: string) =>
                        str.length > 3
                          ? str[0].toUpperCase() + str.slice(1)
                          : str
                      )
                      .join(" ")}
                  </span>
                )}
            </div>
          )}
        </div>
        {!isDisabled ? (
          <Button onClick={handleSubmit(onSubmitFormBaixaOSInstalador)}>
            Próximo
          </Button>
        ) : (
          <VisualizarDocGerado caminho={defaultValues?.pdf_execucao_servico} />
        )}
      </section>
      {step !== 0 &&
        (isLoadingTemplateOS ? (
          <div className="flex justify-center w-full">
            <LoaderSun />
          </div>
        ) : step === 1 ? (
          <div>
            {/* <div onClick={() => setStep(0)}>Voltar</div> */}
            {!isLoading && <></>}
            <FormTemplateGeracaoOS
              dadosCard={dadosCard}
              dadosCliente={dadosCliente}
              proposta={proposta}
              contrato={contrato}
              reloadOrdensServico={reloadOrdensServico}
              // camposPersonalizados={dataFormGeracaoOS}
              camposPersonalizados={{}}
              lojas={lojas}
              setActiveStepAtual={setActiveStepAtual}
              cronogramaInstalacao={[]}
              setIsLoading={setIsLoading}
              activeStep={activeStep}
              templateString={templateOS}
              ordensServico={ordensServico}
              dataFormGeracaoOS={ordemServico}
              dataFormBaixaOSInstalador={dataFormGeracaoOS}
              agendamento={agendamento}
              usuarios={usuarios}
              responsabilidaesFinanceiras={responsabilidaesFinanceiras}
              // setPdf={setPdf}
              setStep={setStep}
              botoes={botoes}
              tipoServicoName={tipoServicoName}
            />
          </div>
        ) : (
          step === 2 && (
            <div>
              <div
              //  onClick={() => console.log(pdf)}
              >
                Deseja Enviar o arquivo?
              </div>
              <VisualizarDocGerado
                caminho={`clientes/${dadosCliente.pasta_cliente}/${dadosCard.id_coleta_cliente}/OrdensServico/OS ${defaultValues?.id_pvos} - Proj ${dadosCard?.id_coleta_cliente} (CLIENTE ${dadosCard?.nome_cliente}).pdf`}
              />
            </div>
          )
        ))}
    </>
  ) : (
    <div className="flex justify-center w-full">
      <LoaderSun />
    </div>
  );
};

export default FormBaixaOSInstalador;