"use client";
import Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import { listarCardsMotivoNegocioPerdido } from "@/requests/CRUD/NegociosPerdido/listarMotivoNegocioPerdido";
import { GetForm } from "@/utils";
import { useEffect, useState } from "react";
import { RiErrorWarningFill } from "react-icons/ri";
import * as yup from "yup";

const FormMotivosNegociosPerdidos = ({
  onSubmitFunction,
  defaultValues,
  disabledFields,
  children,
  ...rest
}: any) => {
  const [yupSchema, setYupSchema] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));
  const { handleSubmit, ...form } = GetForm(yupSchema, setYupSchema);
  const [disabled, setDisabled] = useState(false);
  useEffect(() => {
    listarCardsMotivoNegocioPerdido().then((res) => {
      setDisabled(
        res.some(
          (a: any) => a.motivoCancel_coleta === defaultValues["id_perdido"],
        ),
      );
    });
  }, []);

  return (
    <>
      <form onSubmit={handleSubmit(onSubmitFunction)} {...rest}>
        {disabled && (
          <div className=" mb-5 w-full flex border items-center  bg-[#fff5ea]  gap-2 px-4 p-2 rounded-md border-[#fcdcaa] shadow-sm">
            <div className="rounded-full p-1 shadow-md bg-[#fef9f6]">
              <RiErrorWarningFill size={20} color="#ffb747" />
            </div>
            <p className="text-black text-sm">
              Não é possível alterar o nome, pois possui negócio na etapa!
            </p>
          </div>
        )}
        <InputGroup>
          <Input
            name="motivo_perdido"
            label="Motivo Perdido"
            formulario={form}
            error={"Preencha o Motivo Perdido"}
            required
            defaultValue={defaultValues && defaultValues["motivo_perdido"]}
            disabled={
              disabled ||
              disabledFields?.some((field: string) => field == "motivo_perdido")
            }
          />
        </InputGroup>
        <Input
          name="motivo_detalhado_perdido"
          label="Detalhar Motivo?"
          formulario={form}
          type="checkbox"
          checked={
            defaultValues && defaultValues["motivo_detalhado_perdido"] == "true"
          }
        />
        {children}
      </form>
    </>
  );
};

export default FormMotivosNegociosPerdidos;