import LoaderSun from "@/components/common/Loader/LoaderSun";
import { obterConclusaoInstalacao } from "@/requests/CRM/AgendamentosInstalacoes/obterConclusaoInstalacao";
import { GetGallery } from "@/utils";
import { format } from "date-fns";
import { useEffect, useState } from "react";
import ImagemConclusaoNegocio from "./ImagemConclusaoInstalacao";

const ConclusaoInstalacaoNegocio = ({
  conclusaoDefault = undefined,
  dadosCard,
  ...rest
}: any) => {
  const [conclusao, setConclusao] = useState<any>(conclusaoDefault);
  const [imagens, setImagens] = useState<any[]>([]);
  const [isLoaded, setIsLoaded] = useState(false);

  const { openGallery, setGallery } = GetGallery();

  useEffect(() => {
    if (!conclusao) {
      obterConclusaoInstalacao(dadosCard.id_coleta_cliente)
        .then((res) => {
          const [yearConclusao, monthConclusao, dayConclusao] =
            res?.data_conclusao_instalacao.split("-").map(Number);
          const [year, month, day] = res?.agendamento?.data_instalacao
            .split("-")
            .map(Number);
          const dataConclusao = new Date(
            yearConclusao,
            monthConclusao - 1,
            dayConclusao
          );
          const data = new Date(year, month - 1, day);

          const dataFormatConclusao = format(dataConclusao, "dd/MM/yyyy");
          const dataFormat = format(data, "dd/MM/yyyy");
          const newImagens = res.imagens.map((imagem: any) => ({
            ...imagem,
            src: "",
          }));

          setConclusao({
            ...res,
            data_conclusao_instalacao: dataFormatConclusao,
            agendamento: { ...res.agendamento, data_instalacao: dataFormat },
            imagens: newImagens,
          });
          setImagens(newImagens);
        })
        .finally(() => setIsLoaded(true));
    } else {
      setIsLoaded(true);
    }
  }, []);

  useEffect(() => {
    setGallery(
      imagens.map((imagem) => ({
        src: imagem.src,
        name: imagem.caminho_imagem_conclusao_instalacao.split("/").pop(),
      }))
    );
  }, [imagens]);

  return (
    <div>
      {isLoaded ? (
        conclusao ? (
          <div>
            <div>
              <div className="text-lg font-semibold">Conclusão</div>
              <div>
                <div>
                  Data:{" "}
                  <span className="font-medium">
                    {conclusao.data_conclusao_instalacao}
                  </span>
                </div>
                <div>
                  Observações:{" "}
                  <span className="font-medium">
                    {conclusao.observacoes_conclusao_instalacao}
                  </span>
                </div>
                <div>
                  <div>Imagens</div>
                  <div className="flex flex-row flex-wrap gap-y-3 gap-x-2 justify-evenly max-h-[20vh] overflow-auto">
                    {imagens.map((imagem: any, index: number) => (
                      <ImagemConclusaoNegocio
                        key={index}
                        caminho={imagem.caminho_imagem_conclusao_instalacao}
                        indexImagem={index}
                        setImagens={setImagens}
                        onClick={() => openGallery(index)}
                      />
                    ))}
                    {conclusao.imagens?.length == 0 && (
                      <div>Não há imagens de Conclusão</div>
                    )}
                  </div>
                </div>
              </div>
            </div>
          </div>
        ) : (
          <div>Não há agendamento</div>
        )
      ) : (
        <div className="flex justify-center w-full">
          <LoaderSun />
        </div>
      )}
    </div>
  );
};

export default ConclusaoInstalacaoNegocio;