import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { listarMotivoNegocioPerdido } from "@/requests/CRUD/NegociosPerdido/listarMotivoNegocioPerdido";
import { GetForm } from "@/utils";
import { useEffect, useState } from "react";

const FormCancelamento = ({ onSubmitFunction }: any) => {
  const [motivosReprovacao, setMotivosReprovacao] = useState<any[]>([]);
  const [motivoSelecionado, setMotivoSelecionado] = useState<string>("");
  const [motivoSelecionadoObj, setMotivoSelecionadoObj] = useState<any>();

  const [isLoading, setIsLoading] = useState(false);

  const { handleSubmit, ...form } = GetForm();

  useEffect(() => {
    listarMotivoNegocioPerdido().then((res) => {
      setMotivosReprovacao(
        res.filter((motivo: any) => motivo.status_perdido == "1")
      );
    });
  }, []);

  const handleSubmitReprovar = (data: any) => {
    if (motivoSelecionadoObj.motivo_detalhado_perdido != "true") {
      delete data.motivo_detalhado;
    }
    if (data["motivo_reprovacao"] != "99") {
      data["motivoOutros_proposta"] = "";
    }
    setIsLoading(true);
    Promise.resolve(onSubmitFunction(data)).finally(() => setIsLoading(false));
    // onSubmitReprovar(data).finally(() => setIsLoading(false));
  };
  const [requiredDescription, setRequiredDescription] = useState(false);
  useEffect(() => {
    if (motivoSelecionadoObj) {
      setRequiredDescription(
        motivoSelecionadoObj.motivo_detalhado_perdido == "true"
      );
    }
  }, [motivoSelecionadoObj]);

  return (
    <div className="mt-5">
      <div className="w-full text-center pb-4">
        <span className=" text-black-2 dark:text-white text-xl">
          <strong>Confirma Cancelar o Negócio? </strong>
        </span>
      </div>

      <div className="text-black-2 dark:text-white rounded-lg text-center text-lg font-medium mb-2">
        <span>
          O negócio será perdido e não serão gerados novos eventos de Preventivas no Calendário
        </span>
      </div>

      <div className="bg-secondaryMenu bg-opacity-30 text-black-2 dark:text-white rounded-lg text-center text-lg mb-5">
        <span>
          Por favor, preencha o motivo do
          <strong className="text-danger">
            <i>{" Cancelamento"}</i>
          </strong>
        </span>
      </div>

      <form
        className="flex flex-col gap-5"
        onSubmit={handleSubmit(handleSubmitReprovar)}
      >
        <InputSelectComponent
          formulario={form}
          label="Motivo Cancelamento"
          name="motivo_reprovacao"
          required
          error="Escolha Algum Motivo"
          options={motivosReprovacao.map((res: any) => ({
            ...res,
            label: `${res.motivo_perdido}`,
            value: `${res.id_perdido}`,
          }))}
          onChange={(e: any) => {
            setMotivoSelecionado(e.value);
            setMotivoSelecionadoObj(e);
          }}
        />

        {motivoSelecionadoObj &&
          motivoSelecionadoObj.motivo_detalhado_perdido == "true" && (
            <Input
              type="textarea"
              formulario={form}
              label="Motivo Detalhado"
              name="motivo_detalhado"
              required={requiredDescription}
              error="Preencha o Motivo"
            />
          )}

        {motivoSelecionado == "99" && (
          <Input
            type="textarea"
            formulario={form}
            label="Motivo"
            name="motivoOutros_proposta"
            error="Preencha o Motivo"
          />
        )}

        <Button loading={isLoading} className="w-full bg-primary mt-5">
          Salvar
        </Button>
      </form>
    </div>
  );
};

export default FormCancelamento;