import LoaderSun from "@/components/common/Loader/LoaderSun";
import { obterAgendamentoInstalacaoNegocio } from "@/requests/CRM/AgendamentosInstalacoes/obterAgendamentoInstalacaoNegocio";
import { addDays, format } from "date-fns";
import { useEffect, useState } from "react";

const AgendamentosInstalacaoNegocio = ({
  agendamentoDefault = undefined,
  dadosCard,
  ...rest
}: any) => {
  const [agendamento, setAgendamento] = useState<any>(agendamentoDefault);
  const [isLoaded, setIsLoaded] = useState(false);

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

          const dataFormat = format(data, "dd/MM/yyyy");

          // Calcula a data de término somando os dias de instalação
          const dataTermino = addDays(data, Number(res?.dias_instalacao) || 0);
          const dataTerminoFormat = format(dataTermino, "dd/MM/yyyy");

          setAgendamento({
            ...res,
            data_instalacao: dataFormat,
            data_termino: dataTerminoFormat,
          });
        })
        .finally(() => setIsLoaded(true));
    } else {
      setIsLoaded(true);
    }
  }, []);

  return (
    <div>
      <div className="text-lg font-semibold">Instalação</div>

      {isLoaded ? (
        agendamento ? (
          <div className="flex flex-col p-3 rounded">
            <div>
              Data inicio instalação:{" "}
              <span className="font-medium">{agendamento.data_instalacao}</span>
            </div>
            <div>
              Dias estimados:{" "}
              <span className="font-medium">{agendamento.dias_instalacao}</span>
            </div>
            <div>
              Previsão término:{" "}
              <span className="font-medium">
                {agendamento.data_termino || agendamento.data_instalacao}
              </span>
            </div>
            <div>
              <div>Instaladores: </div>
              <div className="flex flex-col p-2 rounded bg-white/20">
                {agendamento.instaladores?.map(
                  (instalador: any, index: number) => (
                    <div key={index}>
                      <span className="text-lg font-medium">
                        {instalador.nome_usuario}
                      </span>
                    </div>
                  )
                )}
              </div>
            </div>
            <div>
              Observações:{" "}
              <span className="font-medium">
                {agendamento.observacoes_instalacao}
              </span>
            </div>
          </div>
        ) : (
          <div>Não há agendamento</div>
        )
      ) : (
        <div className="flex justify-center w-full">
          <LoaderSun />
        </div>
      )}
    </div>
  );
};

export default AgendamentosInstalacaoNegocio;