"use client";

import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { listarTodosKanbans } from "@/requests/CRM/kanban";
import { useEffect, useState } from "react";
import { Controller, useForm } from "react-hook-form";
import * as yup from "yup";

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

  const { handleSubmit, control, setValue } = useForm({
    defaultValues,
  });

  const [etapas, setEtapas] = useState<any[]>([]);
  const [funis, setFunis] = useState<any[]>([]);
  const [selectedFunil, setSelectedFunil] = useState<any>("");

  useEffect(() => {
    listarFunis();
  }, []);

  useEffect(() => {
    setEtapas([...funis.map((funil) => funil.listas_kanban).flat()]);
  }, [funis]);

  const listarFunis = () => {
    listarTodosKanbans().then((res) => setFunis(res));
  };

  // Update selectedFunil when defaultValues change
  useEffect(() => {
    if (defaultValues.funil_tipo_negocio) {
      setSelectedFunil(defaultValues.funil_tipo_negocio);
    }
  }, [defaultValues]);

  return (
    <form onSubmit={handleSubmit(onSubmitFunction)} {...rest}>
      <InputGroup>
        <Controller
          name="funil_tipo_negocio"
          control={control}
          render={({ field }) => (
            <InputSelectComponent
              {...field}
              label="Funil Inicial"
              options={funis.map((funil: any) => ({
                value: String(funil.id_funil),
                label: funil.titulo_funil,
              }))}
              onChange={(e: any) => {
                field.onChange(e.value);
                setSelectedFunil(String(e.value));
              }}
              defaultValue={defaultValues.funil_tipo_negocio}
              error="Selecione um funil"
              required
            />
          )}
        />

        <Controller
          name="etapa_tipo_negocio"
          control={control}
          render={({ field }) => (
            <InputSelectComponent
              {...field}
              label="Etapa Inicial"
              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={defaultValues.etapa_tipo_negocio}
              error="Selecione uma etapa"
              required
            />
          )}
        />
      </InputGroup>

      {children}
    </form>
  );
};

export default FormTiposNegocios;