import LoaderSun from "@/components/common/Loader/LoaderSun";
import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import { listarChecklistNegocio } from "@/requests/CRUD/PendenciaEngenharia/listarChecklistNegocio";
import { GetForm } from "@/utils";
import equal from "fast-deep-equal";
import { Plus } from "lucide-react";
import { useEffect, useState } from "react";
import { toast } from "react-toastify";
import ItemPendenciaEngenharia from "./ItemPendenciaEngenharia";

const PendenciaEngenharia = ({
  onSubmitFunction,
  dadosCard,
  formulario: form,
  onFormReady,
  engenharia,
  children
}: any) => {
  const [checklistValidacaoEngenharia, setSchecklistValidacaoEngenharia] =
    useState<any[]>([]);
  const [nomeItemValidacao, setNomeItemValidacao] = useState("");
  const [checkListKey, setCheckListKey] = useState(0);
  const [inputKey, setInputKey] = useState(0);
  const [isLoaded, setIsLoaded] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  const [handleSubmits, setHandleSubmits] = useState<any[]>([]);

  const validateNewHandleSubmits = (
    value: any[] | ((prev: any[]) => any[]),
  ) => {
    // 1. Resolve o valor (se for função, executa; se não, usa o valor direto)
    const nextValue =
      typeof value === "function" ? value(handleSubmits) : value;

    // 2. Executa a sua lógica de validação
    const isValid =
      nextValue?.length != handleSubmits?.length &&
      !equal(nextValue, handleSubmits);
    if (isValid) {
      setHandleSubmits(nextValue);
    }
  };


  useEffect(() => {
    listarChecklistNegocio({
      // id_negocio: dadosCard.id_coleta_cliente,
      id_loja: dadosCard.id_loja_coleta,
    })
      .then((res: any) =>
        setSchecklistValidacaoEngenharia(
          res
            .filter(
              (item: any) =>
                item.status_item_checklist_engenharia == "1" &&
                !item.cod_negocio_item_checklist_engenharia &&
                item?.tipoEngenharia_item_checklist_engenharia == engenharia,
            )
            .map((item: any) => ({
              ...item,
              cod_negocio_item_checklist_engenharia:
                dadosCard.id_coleta_cliente,
              // caminhosAnexos: item.anexos,
              observacao_item_checklist_engenharia: "",
              anexos: [],
            })),
        ),
      )
      .finally(() => setIsLoaded(true));
  }, []);

  useEffect(() => {
    const itensForm = form?.control?._formValues?.checklistValidacaoEngenharia;
    if (
      !itensForm ||
      JSON.stringify(checklistValidacaoEngenharia) != JSON.stringify(itensForm)
    ) {
      form?.setValue(
        "checklistValidacaoEngenharia",
        checklistValidacaoEngenharia,
      );
      // setKeyListItens((prev) => prev + 1);
    }
  }, [checklistValidacaoEngenharia]);

  const onSubmitFormPendenciaEngenharia = async (e: any) => {
    setIsLoading(true);
    return Promise.all(
      handleSubmits.map(
        (handleSubmitItem) =>
          new Promise((resolve, reject) => {
            handleSubmitItem((d: any) => resolve(true))(e).finally(() =>
              reject(false),
            );
          }),
      ),
    )
      .then((res) => {
        // const id_pendencia = engenharia === "1" ? "10" : "19";
        // addConclusaoPendencia({
        //   id_coleta: dadosCard.id_coleta_cliente,
        //   id_etapa: dadosCard.id_lista,
        //   id_pendencia: id_pendencia,
        // }).then((res) => {});

        return onSubmitFunction(checklistValidacaoEngenharia).finally(() =>
          setIsLoading(false),
        );
      })
      .catch((err) => {
        setIsLoading(false);
      });
  };

  return isLoaded ? (
    <div>
      <div
        key={checkListKey}
        className="flex flex-col gap-2 max-h-[65vh] overflow-auto"
      >
        {checklistValidacaoEngenharia.map((itemValidacao, indexItem) => {
          return itemValidacao.status_item_checklist_engenharia == "1" ? (
            <ItemPendenciaEngenharia
              key={indexItem}
              itemValidacao={itemValidacao}
              setIsLoaded={setIsLoaded}
              setSchecklistValidacaoEngenharia={
                setSchecklistValidacaoEngenharia
              }
              indexItem={indexItem}
              setKeyListItens={setCheckListKey}
              setHandleSubmits={validateNewHandleSubmits}
              dadosCard={dadosCard}
            />
          ) : (
            <></>
          );
        })}
      </div>
      <div className="flex flex-row flex-wrap gap-3 justify-center items-center pt-3">
        <Input
          key={inputKey}
          name="input"
          placeholder="Nome Item Verificação"
          width={"w-fit"}
          onChange={(e) => setNomeItemValidacao(e.target.value)}
          maxLength={40}
        />
        <Button
          type="button"
          onClick={() => {
            if (nomeItemValidacao) {
              if (
                checklistValidacaoEngenharia.some(
                  (item) =>
                    item.nome_item_checklist_engenharia.trim().toLowerCase() ==
                    nomeItemValidacao.trim().toLowerCase(),
                )
              ) {
                return toast.error("Item já presente");
              }
              setSchecklistValidacaoEngenharia((prev) => [
                ...prev,
                {
                  nome_item_checklist_engenharia: nomeItemValidacao,
                  status_item_checklist_engenharia: 1,
                  cod_loja_item_checklist_engenharia: dadosCard.id_loja_coleta,
                  cod_negocio_item_checklist_engenharia:
                    dadosCard.id_coleta_cliente,
                },
              ]);
              setNomeItemValidacao("");
              setInputKey((prev) => prev + 1);
              setCheckListKey((prev) => prev + 1);
            }
          }}
          className={`rounded-full bg-primary p-2 hover:bg-primary/80 active:bg-primary`}
        >
          <Plus />
        </Button>
      </div>
      {children}
      <div className="w-full flex justify-end pt-3">
        <Button
          type="button"
          onClick={onSubmitFormPendenciaEngenharia}
        // loading={isLoading}
        >
          Concluir Pendencia Engenharia
        </Button>
      </div>
    </div>
  ) : (
    <div className="w-full h-[500px] flex flex-col justify-center items-center">
      <LoaderSun />
    </div>
  );
};

export default PendenciaEngenharia;