import Button from "@/components/Forms/Button";
import InputSelectComponent from "@/components/Forms/InputSelect";
import LoaderSun from "@/components/common/Loader/LoaderSun";
import {
  cadastrarComplementoCard,
  listarComplementosColeta,
} from "@/requests/CRM/kanban";
import { useAuth } from "@/src/contexts/authContext";
import { ArrowLeft, FilePlus } from "lucide-react";
import { useEffect, useState } from "react";
import { FieldValues } from "react-hook-form";
import DetalhesComplementoCard from "./DetalhesComplementoCard";
import FormComplementosCard from "./FormComplementosCard";

const ComplementosCard = ({ dadosCard, dadosCliente }: any) => {
  const [isLoading, setIsLoading] = useState(false);
  const [isLoaded, setIsLoaded] = useState(false);
  const [tipo_complemento_card, setTipo_complemento_card] = useState("Outros");
  // const [opcoesComplemento, setOpcoesComplemento] = useState([
  //   { label: "Outros", value: "Outros" },
  // ]);
  const opcoesComplemento = [
    { label: "Outros", value: "Outros" },
    { label: "Troca de Kit", value: "Troca de Kit" },
  ];
  const [complementosColeta, setComplementosColeta] = useState<any[]>([]);
  const [view, setView] = useState("Complementos");
  // const [listaModulos, setListaModulos] = useState<any[]>([]);
  // const [listaInversores, setListaInversores] = useState<any[]>([]);

  const { valuesSession, usuario } = useAuth();
  const { session } = valuesSession();

  // async function buscaContratosPropostasColeta() {
  //   let propostas: any[] = [];
  //   let contratos: any[] = [];
  //   async function buscaPropostas() {
  //     return listarPropostaColeta(dadosCard.id_coleta_cliente).then((res) => {
  //       propostas = res;
  //     });
  //   }
  //   async function buscaContratos() {
  //     return listarContratosPorColeta(dadosCard.id_coleta_cliente).then(
  //       (res) => {
  //         contratos = res;
  //       }
  //     );
  //   }
  //   return Promise.all([buscaPropostas(), buscaContratos()]).then(() => {
  //     if (
  //       propostas.some(
  //         (proposta) =>
  //           proposta.aprovacao_cliente == "1" && proposta.status_proposta == "1"
  //       ) &&
  //       contratos.some((contrato) => contrato.status_contrato == "1")
  //     ) {
  //       setOpcoesComplemento((prev) => [
  //         ...prev,
  //         { label: "Troca de Kit", value: "Troca de Kit" },
  //       ]);
  //     }
  //   });
  // }

  useEffect(() => {
    // buscaContratosPropostasColeta();
    atualizarComplementosCard();
  }, []);

  async function atualizarComplementosCard() {
    setIsLoaded(false);
    setView("Complementos");
    listarComplementosColeta({ id_coleta: dadosCard.id_coleta_cliente })
      .then((res) => {
        setComplementosColeta(res);
      })
      .finally(() => setIsLoaded(true));
  }

  const submitComplementoCard = async (data: FieldValues) => {
    setIsLoading(true);
    const formData = new FormData();
    data = {
      tipo_complemento_card,
      ...data,
      coleta_id: dadosCard.id_coleta_cliente,
      caminhos_anexos: data.anexos.map((anexo: File) => ({
        caminho_anexo_complemento_card: `clientes/${dadosCliente?.pasta_cliente}/${dadosCard.id_coleta_cliente}/Complementos/${anexo.name}`,
      })),
      responsavel: session.id_usuario,
    };

    for (const key in data) {
      formData.append(key, data[key]);
    }
    return cadastrarComplementoCard(data).finally(() => {
      setIsLoading(false);
      atualizarComplementosCard();
    });
  };

  return (
    <div className="flex flex-col">
      {usuario.visualiza_custo_kit_usuario == 1 ? (
        view == "Complementos" ? (
          <div className="flex flex-col gap-2">
            <div className="flex justify-end">
              {dadosCard?.todasPendencias_concluidas_coleta == "0" && (
                <Button
                  onClick={() => setView("NovoComplemento")}
                  className="w-fit px-8 gap-2 text-sm flex items-center"
                >
                  <FilePlus size={18} />
                  Novo Complemento
                </Button>
              )}
            </div>
            <div className="flex flex-col gap-2">
              {isLoaded ? (
                complementosColeta.map((complemento: any, index: number) => (
                  <DetalhesComplementoCard
                    key={index}
                    complemento={complemento}
                  />
                ))
              ) : (
                <div className="w-full h-[400px] flex flex-col justify-center items-center">
                  <LoaderSun />
                </div>
              )}
            </div>
          </div>
        ) : (
          <div className="flex flex-col">
            <Button
              type="button"
              onClick={atualizarComplementosCard}
              className={`w-fit h-fit mb-2 px-8 gap-2 flex items-center`}
            >
              <ArrowLeft size={18} />
              Voltar
            </Button>
            <div className="grid gap-3 w-full dark:bg-form-input bg-white p-3 h-full shadow-sm xl:shadow-xl rounded-md">
              <div>
                <InputSelectComponent
                  label="Tipo de Complemento"
                  options={opcoesComplemento}
                  onChange={(e: any) => setTipo_complemento_card(e.value)}
                  defaultValue={tipo_complemento_card}
                />
              </div>
              <FormComplementosCard
                onSubmitFunction={submitComplementoCard}
                defaultValues={{ tipo_complemento_card }}
                setIsLoading={setIsLoading}
                loading={isLoading}
              />
            </div>
          </div>
        )
      ) : (
        <div>Você não tem permissão para visualizar os complementos</div>
      )}
    </div>
  );
};

export default ComplementosCard;