import InputSelectComponent from "@/components/Forms/InputSelect";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { IValueLabel } from "@/types/formInterfaces";
import { GetForm } from "@/utils";
import { useState } from "react";
import { MdKeyboardArrowRight } from "react-icons/md";
import * as yup from "yup";

const FormParametorosAutomatizacao = ({
  onSubmitFunction,
  children,
  etapas,
  funis,
  acoes,
  reacoes,
  tiposNegocios,
  etapasAutomatizadas,
  ...rest
}: any) => {
  const [yupSchema, setYupSchema] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));
  const [selectedFunil, setSelectedFunil] = useState<any>("");

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

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

    return onSubmitFunction(data);
  };
  const acoesFalse = acoes.map(
    (acao: any) =>
      !etapasAutomatizadas.some(
        (etapaAutomatizada: any) =>
          etapaAutomatizada.acao_automatizacao == acao.id_acao,
      ),
  );

  const hasAllFalse = acoesFalse.every((value: any) => value === false);

  const disabledInput = hasAllFalse ? true : false;
  const tipoNegocio = form.watch(
    "tipo_negocio_automatizacao" as any,
  ) as unknown as IValueLabel;

  const { isMobile } = useScreenContext();
  return (
    <>
      <form
        onSubmit={handleSubmit(clearFormToSubmit)}
        {...rest}
        className="w-full"
      >
        {/* <div className="flex flex-col sm:flex-row items-center"> */}
        <div
          className={`w-full flex ${isMobile ? "flex-col" : "flex-row"} items-center`}
        >
          <InputSelectComponent
            name="tipo_negocio_automatizacao"
            label="Tipo de Negócio"
            width="w-full"
            formulario={form}
            options={tiposNegocios.map((tipo: any) => ({
              value: tipo.id_tipo_negocio,
              label: tipo.nome_tipo_negocio,
            }))}
            disabled={disabledInput}
            error="Selecione uma ação"
            required
          />

          <MdKeyboardArrowRight
            className={`w-20 rotate-90 sm:rotate-0 mt-2 sm:mt-0 ${isMobile ? "hidden" : "block"}`}
          />
          <InputSelectComponent
            name="acao_automatizacao"
            label="Ação"
            width="w-full"
            formulario={form}
            options={acoes.map((acao: any) => ({
              value: acao.id_acao,
              label: acao.nome_acao,
            }))}
            disabled={disabledInput}
            error="Selecione uma ação"
            required
          />

          <MdKeyboardArrowRight
            className={`w-20 rotate-90 sm:rotate-0 mt-2 sm:mt-0 ${isMobile ? "hidden" : "block"}`}
          />
          <InputSelectComponent
            name="reacao_automatizacao"
            label="Reação"
            width="w-full"
            formulario={form}
            options={reacoes.map((reacao: any) => ({
              value: String(reacao.id_reacao),
              label: reacao.nome_reacao,
            }))}
            error="Selecione uma reação"
            required
          />
          <MdKeyboardArrowRight
            className={`w-20 rotate-90 sm:rotate-0 mt-2 sm:mt-0 ${isMobile ? "hidden" : "block"}`}
          />
          <InputSelectComponent
            name="funil_destino"
            label="Fluxo"
            width="w-full"
            formulario={form}
            options={funis
              .filter(
                (funil: any) =>
                  funil.id_funil != "0" &&
                  (funil.tipo_negocio_funil == "*" ||
                    funil.tipo_negocio_funil
                      .split(",")
                      .includes(tipoNegocio?.value)),
              )
              .map((funil: any) => ({
                value: String(funil.id_funil),
                label: funil.titulo_funil,
              }))
              .sort((a: any, b: any) => a.label.localeCompare(b.label))}
            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 ${isMobile ? "hidden" : "block"}`}
          />
          <InputSelectComponent
            name="etapa_destino_automatizacao"
            label="Etapa Destino"
            formulario={form}
            width="w-full"
            options={etapas
              .filter((etapa: any) => etapa.grupo_etapa_funil == selectedFunil)
              // .filter(
              //   (etapa: any) =>
              //     funis.filter(
              //       (funil: any) => funil.id_funil == selectedFunil,
              //     )?.[0].vendas_funil != "1" || etapa.index_etapa_funil != 0,
              // )
              .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>
        {children}
      </form>
    </>
  );
};

export default FormParametorosAutomatizacao;