import LoaderSun from "@/components/common/Loader/LoaderSun";
import { editarNomeNegocio } from "@/requests/CRUD/ColetaDados/editarColeta";
import { addConclusaoPendencia } from "@/requests/CRUD/ConclusaoPendencia/conclusaoPendencia";
import { useKanbanContext } from "@/src/contexts/kanbanContext";
import { useEffect, useState } from "react";
import FormDadosTecnicosManutencao from "./FormDadosTecnicosManutencao";

const DadosTecnicosManutencao = ({
  dadosCard,
  setDadosCard,
  blockEditCard,
  steps,
  setActiveStepAtual,
  activeStep,
}: any) => {
  const [isLoaded, setIsLoaded] = useState(false);
  const [keyForm, setKeyForm] = useState(0);
  const [defaultValues, setDefaultValues] = useState<any>({});

  const { reListarDadosKanban } = useKanbanContext();

  async function onSubmitEditCard(data: any) {
    const tipoEdificacao =
      data.tipo_edificacao_coleta?.value ?? data.tipo_edificacao_coleta;

    return editarNomeNegocio({
      id_coleta: dadosCard.id_coleta_cliente,
      tipo_edificacao_coleta: tipoEdificacao,
    }).then(() => {
      addConclusaoPendencia({
        id_coleta: dadosCard.id_coleta_cliente,
        id_etapa: dadosCard.id_lista,
        id_pendencia: "2",
      });

      setDefaultValues((prev: any) => ({
        ...prev,
        tipo_edificacao_coleta: tipoEdificacao,
      }));
      setDadosCard?.((prev: any) => ({
        ...prev,
        tipo_edificacao_coleta: tipoEdificacao,
      }));
      setKeyForm((k) => k + 1);

      const dadosTecnicosIndex = steps.findIndex(
        (etapa: any) => etapa.label === "Dados Técnicos",
      );
      if (activeStep === dadosTecnicosIndex) {
        setActiveStepAtual(activeStep + 1);
      }

      reListarDadosKanban();
    });
  }

  useEffect(() => {
    setDefaultValues({ ...dadosCard });
    setIsLoaded(true);
  }, [dadosCard?.id_coleta_cliente]);

  useEffect(() => {
    if (!isLoaded) return;
    setDefaultValues((prev: any) => ({
      ...prev,
      tipo_edificacao_coleta: dadosCard?.tipo_edificacao_coleta,
    }));
    setKeyForm((k) => k + 1);
  }, [dadosCard?.tipo_edificacao_coleta, isLoaded]);

  return (
    <div className="flex justify-center relative z-1 h-fit rounded w-full">
      <div className="flex justify-center w-full">
        {isLoaded ? (
          <div className="grid w-full">
            <div className="dark:bg-form-input bg-white p-3 shadow rounded">
              <FormDadosTecnicosManutencao
                onSubmitFunction={onSubmitEditCard}
                defaultValues={defaultValues}
                blockEditCard={blockEditCard}
                key={keyForm}
              />
            </div>
          </div>
        ) : (
          <div className="w-full h-[400px] flex flex-col justify-center items-center">
            <LoaderSun />
          </div>
        )}
      </div>
    </div>
  );
};

export default DadosTecnicosManutencao;