/* eslint-disable @next/next/no-img-element */
import FileRenderer from "@/components/FileRenderer";
import Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import { baixarAwsContent } from "@/requests/common/Aws/baixarAws";
import { obterAgendamentoInstalacaoNegocio } from "@/requests/CRM/AgendamentosInstalacoes/obterAgendamentoInstalacaoNegocio";
import { FormatFields, GetForm, GetGallery } from "@/utils";
import { addDays, format, parseISO } from "date-fns";
import { useEffect, useState } from "react";
import { FaPaperclip } from "react-icons/fa";
import { MdClose } from "react-icons/md";
import Swal from "sweetalert2";

const FormConclusaoInsalacao = ({
  onSubmitFunction,
  dadosCard,
  children,
  ...rest
}: any) => {
  const [inputKey, setInputKey] = useState(1);
  const [imagens, setImagens] = useState<File[]>([]);
  const [valorServicoProposta, setValorServicoProposta] = useState<number>(0);
  const [valorServicosPago, setValorServicosPago] = useState<number>(0);
  const [dataInstalacao, setDataInstalacao] = useState<Date>(new Date());

  const [imageUrls, setImageUrls] = useState<string[]>([]);

  const { openGallery, setGallery } = GetGallery();

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

    const loadImages = async () => {
      const newImageUrls = await Promise.all(
        imagens.map(async (imagem) => {
          const reader = new FileReader();
          return new Promise((resolve) => {
            reader.onload = () => resolve(reader.result as string);
            reader.readAsDataURL(imagem);
          });
        })
      );
      setImageUrls(newImageUrls as string[]);
      setGallery(
        newImageUrls.map((newImageUrl, index) => ({
          src: newImageUrl as string,
          name: imagens[index].name?.split("/").pop()!,
        }))
      );
    };

    loadImages();
  }, [imagens]);

  const { handleSubmit, ...form } = GetForm();
  const { ...formView } = GetForm();

  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 adicionarImagemConclusao = (event: any) => {
    const inputElement = event.target as HTMLInputElement;

    if (inputElement.files && inputElement.files.length > 0) {
      let arquivo = inputElement.files[0];
      setImagens((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);
    }
  };

  const onSubmitFormConclusaoInstalacao = (data: any) => {
    data = { ...data, imagens };

    const hoje = new Date();
    hoje.setHours(0, 0, 0, 0);

    const dataConclusao = parseISO(data.data_conclusao_instalacao);

    dataConclusao.setHours(0, 0, 0, 0);

    if (dataConclusao > hoje) {
      Swal.fire({
        title: "Conclusão da Instalação Não Realizada!",
        icon: "warning",
        html: `Data de Conclusão: <b>${format(dataConclusao, "dd/MM/yyyy")}</b> <br/>não pode ser maior que data atual!`,
        confirmButtonText: "OK",
        confirmButtonColor: "#4CAF50",
      });
      return;
    }

    // if (dataConclusao < dataInstalacao) {
    //   Swal.fire({
    //     title: "Conclusão da Instalação Não Realizada!",
    //     icon: "warning",
    //     html: `Data de Conclusão: <b>${format(dataConclusao, "dd/MM/yyyy")}</b> <br/>não pode ser inferior a <br/>Data de Instalação: <b>${format(dataInstalacao, "dd/MM/yyyy")}</b>!`,
    //     confirmButtonText: "OK",
    //     confirmButtonColor: "#4CAF50",
    //   });
    //   return;
    // }

    return onSubmitFunction(data);
  };

  useEffect(() => {
    obterAgendamentoInstalacaoNegocio(dadosCard.id_coleta_cliente)
      .then((res) => {
        const data_instalacao = res?.data_instalacao;
        const dias_instalacao = res?.dias_instalacao;
        var dataInicial = parseISO(data_instalacao);

        const dias = parseInt(dias_instalacao, 10);

        setDataInstalacao(dataInicial);

        dataInicial = addDays(dataInicial, dias);

        const ano = dataInicial.getFullYear();
        const mes = String(dataInicial.getMonth() + 1).padStart(2, "0");
        const dia = String(dataInicial.getDate()).padStart(2, "0");

        form.setValue("data_conclusao_instalacao", `${ano}-${mes}-${dia}`);
      })
      .finally(() => {});
  }, []);

  useEffect(() => {
    baixarAwsContent(
      dadosCard.propostas.find((prop: any) => prop.status_proposta == 1)
        .caminho_resultadoPrecificacao_proposta
    ).then((resultadoPrecificacao_proposta) => {
      const resultPreco = JSON.parse(resultadoPrecificacao_proposta);

      formView.setValue(
        "valorServicoProposta",
        FormatFields.formatarNumero(resultPreco.valor_servico)
      );
      setValorServicoProposta(
        +FormatFields.desformatarNumeros(resultPreco.valor_servico)
      );
    });
  }, []);

  useEffect(() => {
    if (
      valorServicosPago &&
      valorServicoProposta &&
      valorServicosPago > valorServicoProposta
    )
      form.setError("valorServicos_conclusao_instalacao" as never, {
        type: "manual",
        message: "Custo é maior que Custo da proposta!",
      });
    else form.clearErrors("valorServicos_conclusao_instalacao");
  }, [valorServicosPago, valorServicoProposta]);

  return (
    <form onSubmit={handleSubmit(onSubmitFormConclusaoInstalacao)} {...rest}>
      <InputGroup>
        <Input
          name="data_conclusao_instalacao"
          label="Data da conclusão"
          formulario={form}
          type="date"
          required
          error="Informe a data da conclusão"
        />
      </InputGroup>
      <InputGroup>
        <Input
          name="valorServicos_conclusao_instalacao"
          label="Custo do Serviço"
          formulario={form}
          mascara="numero"
          prefix={"R$"}
          required
          error="Informar valor dos serviços"
          onChange={(e: any) =>
            setValorServicosPago(
              +FormatFields.desformatarNumeros(e.target.value)
            )
          }
        />
        <Input
          label="Custo do Serviço na Proposta"
          formulario={formView}
          name="valorServicoProposta"
          mascara="numero"
          prefix={"R$"}
          disabled
        />
      </InputGroup>
      <InputGroup>
        <Input
          name="observacoes_conclusao_instalacao"
          label="Observações"
          formulario={form}
          type="textarea"
        />
      </InputGroup>
      <div>
        <div className="flex flex-col gap-1 h-[165px] overflow-auto">
          {imageUrls.map((imageUrl, index) => {
            const imagem: File = imagens[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(imagem)}
                onClick={() => openGallery(index)}
              >
                <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);
                    }}
                  >
                    {/* <img
                      key={index}
                      src={imageUrl}
                      alt={`Imagem ${index + 1}`}
                    /> */}
                    <FileRenderer
                      src={imageUrl}
                      name={imagem?.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>
                  {imagem?.name}
                </div>
                <button
                  type="button"
                  onClick={(e) => {
                    e.stopPropagation();
                    setImagens((prev) => {
                      const newImagens = [...prev];
                      newImagens.splice(index, 1);
                      return newImagens;
                    });
                  }}
                >
                  <MdClose />
                </button>
              </div>
            );
          })}
          {/* {imageUrls.map((imageUrl, index) => (
            <img key={index} src={imageUrl} alt={`Imagem ${index + 1}`} />
          ))} */}
        </div>
        <label
          htmlFor="add_imagem"
          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 Foto
        </label>
        <input
          id="add_imagem"
          type="file"
          accept="image/png, image/gif, image/jpeg"
          className="hidden"
          key={inputKey}
          onInput={(e) => adicionarImagemConclusao(e)}
        />
      </div>
      {children}
    </form>
  );
};

export default FormConclusaoInsalacao;