import InputSelectComponent from "@/components/Forms/InputSelect";
import { GetForm } from "@/utils";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import { MdKeyboardArrowRight } from "react-icons/md";
import * as yup from "yup";
import { useRouter } from "next/router"; // Import the 'useRouteParam' function from the appropriate module

const FormFunisParalelos = ({
  onSubmitFunction,
  children,
  etapas,
  funis,
  ...rest
}: any) => {
  const [yupSchema, setYupSchema] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));

  const [selectedFunil, setSelectedFunil] = useState<any>("");
  const [selectedFunilDestiny, setSelectedFunilDestiny] = useState<any>("");

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

  const clearFormToSubmit = (data: any) => {
    for (let key in data) {
      form.setValue(key as never, "" as never);
    }

    onSubmitFunction(data);
  };
  const pathname = usePathname();
  const onFunil = pathname?.includes("CXESCRM002");
  const router = useRouter();

  useEffect(() => {
    if (onFunil) {
      setSelectedFunil(router.query.funil);
    }
  }, [router.query.funil]);

  return (
    <>
      <form onSubmit={handleSubmit(clearFormToSubmit)} {...rest}>
        <span className="text-black  font-medium">Quando chegar em:</span>
        <div className="flex flex-col sm:flex-row mt-2 items-center">
          <InputSelectComponent
            name="funil_atual"
            label="Funil"
            disabled={onFunil}
            formulario={form}
            options={funis.map((funil: any) => ({
              value: String(funil.id_funil),
              label: funil.titulo_funil,
            }))}
            defaultValue={onFunil ? router.query.funil : ""}
            onChange={(e: any) => {
              setSelectedFunil(String(e.value));
            }}
            error="Selecione um funil"
            required
          />
          <MdKeyboardArrowRight
            className={`w-20 rotate-90 sm:rotate-0 mt-2 sm:mt-0`}
          />
          <InputSelectComponent
            name="etapa_funil_paralelo"
            label="Etapa"
            formulario={form}
            options={etapas
              .filter((etapa: any) => etapa.grupo_etapa_funil == selectedFunil)
              .map((etapa: any) => ({
                value: String(etapa.id_etapa_funil),
                label: etapa.titulo_etapa_funil,
              }))}
            defaultValue={
              funis.find((funil: any) => funil.id_funil == selectedFunil)
                ?.listas_kanban[0]?.id_etapa_funil
            }
            error="Selecione uma etapa"
            required
          />
        </div>
        <span className="text-black  font-medium mt-5 flex">Incluir em:</span>
        <div className="flex flex-col sm:flex-row mt-2 items-center">
          <InputSelectComponent
            name="funil_destino"
            label="Funil"
            formulario={form}
            options={funis.map((funil: any) => ({
              value: String(funil.id_funil),
              label: funil.titulo_funil,
            }))}
            onChange={(e: any) => {
              setSelectedFunilDestiny(String(e.value));
            }}
            error="Selecione um funil"
            required
          />
          <MdKeyboardArrowRight
            className={`w-20 rotate-90 sm:rotate-0 mt-2 sm:mt-0`}
          />
          <InputSelectComponent
            name="etapa_destino_funil_paralelo"
            label="Etapa"
            formulario={form}
            options={etapas
              .filter(
                (etapa: any) => etapa.grupo_etapa_funil == selectedFunilDestiny
              )
              .map((etapa: any) => ({
                value: String(etapa.id_etapa_funil),
                label: etapa.titulo_etapa_funil,
              }))}
            defaultValue={
              funis.find((funil: any) => funil.id_funil == selectedFunilDestiny)
                ?.listas_kanban[0]?.id_etapa_funil
            }
            error="Selecione uma etapa"
            required
          />
        </div>
        {children}
      </form>
    </>
  );
};

export default FormFunisParalelos;