import { listarMotivoNegocioPerdido } from "@/requests/CRUD/NegociosPerdido/listarMotivoNegocioPerdido";
import { GetForm } from "@/utils";
import { useEffect, useState } from "react";
import { FieldValues } from "react-hook-form";
import * as yup from "yup";
import Button from "../Forms/Button";
import Input from "../Forms/Input";
import InputSelectComponent from "../Forms/InputSelect";
import ModalComponente from "./ModalComponente";

const ModalRejeicao = ({
  onSubmitReprovar,
  closeFuncion,
  openModalRejeitar,
  isColeta = false,
}: any) => {
  const [motivosReprovacao, setMotivosReprovacao] = useState<any[]>([]);
  const [motivoSelecionado, setMotivoSelecionado] = useState<string>("");
  const [motivoSelecionadoObj, setMotivoSelecionadoObj] = useState<any>();
  const [yupSchemaReprovar, setYupSchemaReprovar] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));
  const [isLoading, setIsLoading] = useState(false);

  const { handleSubmit, ...formReprovar } = GetForm(
    yupSchemaReprovar,
    setYupSchemaReprovar
  );

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

  const handleSubmitReprovar = (data: FieldValues) => {
    if (motivoSelecionadoObj.motivo_detalhado_perdido != "true") {
      delete data.motivo_detalhado;
    }
    setIsLoading(true);
    Promise.resolve(onSubmitReprovar(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 (
    <ModalComponente
      hasForm={false}
      header={`${"Cancelamento"}`}
      defaultW="w-[400px]"
      opened={openModalRejeitar}
      onClose={() => closeFuncion()}
      hasSaveButton={false}
    >
      <div className="mt-5">
        {isColeta && (
          <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="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>
            {isColeta && ", o card/negócio será removido do fluxo"}
          </span>{" "}
        </div>

        <form
          className="flex flex-col gap-5"
          onSubmit={handleSubmit(handleSubmitReprovar)}
        >
          <InputSelectComponent
            formulario={formReprovar}
            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={formReprovar}
                label="Motivo Detalhado"
                name="motivo_detalhado"
                required={requiredDescription}
                error="Preencha o Motivo"
              />
            )}

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

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

export default ModalRejeicao;