import Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { listarProdutosHelte } from "@/requests/CRM/APIHelte/listarProdutosHelte";
import { listarCategoriasTelhados } from "@/requests/CRUD/CategoriasTelhado/listarCategoriaTelhado";
import { useAuth } from "@/src/contexts/authContext";
import { FormatFields, GetForm } from "@/utils";
import { Tooltip } from "@mui/material";
import { useEffect, useState } from "react";
import { FieldValues } from "react-hook-form";
import { IoMdInformationCircleOutline } from "react-icons/io";
import { toast } from "react-toastify";

const FormMarkup = ({
  onSubmitFunction,
  defaultValues,
  // disabledFields,
  children,
  ...rest
}: any) => {
  const [disabledFields, setDisabledFields] = useState<any>([]);

  const [vinculaPotencia, setVinculaPotencia] = useState(
    defaultValues && defaultValues["vincular_potencia_campo_markup"] == "1"
  );
  const [vinculaQtdModulos, setVinculaQtdModulos] = useState(
    defaultValues && defaultValues["vincular_modulo_campo_markup"] == "1"
  );
  const [vinculaTelhados, setVinculaTelhados] = useState(
    defaultValues && defaultValues["vincular_telhado_campo_markup"] == "1"
  );
  const [telhados, setTelhados] = useState<any>([]);

  const { valuesSession } = useAuth();
  const { session } = valuesSession();

  const { handleSubmit, ...form } = GetForm();
  // const [valor, setValor] = useState<any[]>([0, 9.5]);
  const valorMaxPotencia = 9.5;
  const valorMinPotencia = 0;
  const tiposCampos = [
    { tipo: "Valor", id: "0" },
    { tipo: "Percentual", id: "1" },
  ];
  const calcCampos = [
    { calc: "Acrescentar ao Custo do Kit", id: "0" },
    { calc: "Diminuir do Custo do Kit", id: "1" },
  ];
  const snOptions = [
    { label: "Sim", value: "1" },
    { label: "Não", value: "0" },
  ];

  useEffect(() => {
    if (session?.sigla?.toLowerCase() == "elb") {
      listarProdutosHelte().then((res: any) => {
        setTelhados(res?.products?.structures);
      });
    } else {
      listarCategoriasTelhados().then((res: any) => {
        setTelhados(
          res.map((telhado: any) => ({
            label: telhado.nome_categoria_telhado,
            value: telhado.id_categoria_telhado,
          }))
        );
      });
    }
    // setVinculaPotencia(defaultValues["vincular_potencia_campo_markup"]);

    // if (defaultValues["range_potencia_campo_markup"]) {
    //   const valores = defaultValues["range_potencia_campo_markup"].split("^");
    //   // setValor(valores);
    // }
  }, []);

  // useEffect(() => {
  // }, [form]);

  const onSubmitFormMarkup = (data: FieldValues) => {
    data["telhados_modulo_markup"] = data.telhados_modulo_markup?.join(",");
    data["valor_campo_markup"] = FormatFields.desformatarNumeros(
      data["valor_campo_markup"]
    );

    if (data["vincular_potencia_campo_markup"] == "0") {
      data["min_potencia_markup"] = "0,00";
      data["max_potencia_markup"] = "0,00";
    }
    if (data["vincular_modulo_campo_markup"] == "0") {
      data["min_modulo_markup"] = "0";
      data["max_modulo_markup"] = "0";
    }
    const min_potencia = +FormatFields.desformatarNumeros(
      data["min_potencia_markup"]
    );
    const max_potencia = +FormatFields.desformatarNumeros(
      data["max_potencia_markup"]
    );
    const min_modulo = +data["min_modulo_markup"];
    const max_modulo = +data["max_modulo_markup"];
    if (max_potencia < min_potencia) {
      return toast.error("Potência máxima não pode ser menor que a mínima");
    }
    if (max_modulo < min_modulo) {
      return toast.error(
        "Quantidade máxima de módulos não pode ser menor que a mínima"
      );
    }

    data["min_potencia_markup"] = min_potencia;
    data["max_potencia_markup"] = max_potencia;

    return onSubmitFunction(data);
  };

  // const validateSubmit = (data: any) => {
  //   handleSubmit(data);
  // };

  return (
    <form onSubmit={handleSubmit(onSubmitFormMarkup)} key={form.key} {...rest}>
      <InputGroup>
        <div className="w-full">
          <InputGroup>
            <Input
              name="nome_campo_markup"
              label="Nome"
              formulario={form}
              error={"Preencha o Nome"}
              required
              defaultValue={defaultValues && defaultValues["nome_campo_markup"]}
              disabled={disabledFields?.some(
                (field: string) => field == "nome_campo_markup"
              )}
            />
            <InputSelectComponent
              name="oculta_campo_markup"
              label="Ocultar campo?"
              skipEffect
              formulario={form}
              options={snOptions}
              required
              error={"Escolha uma opção"}
              defaultValue={
                defaultValues && defaultValues["oculta_campo_markup"]
              }
              disabled={disabledFields?.some(
                (field: string) => field == "oculta_campo_markup"
              )}
            />
          </InputGroup>
          <InputGroup>
            <InputSelectComponent
              name="tipo_campo_markup"
              label="Tipo campo"
              skipEffect
              formulario={form}
              options={tiposCampos.map((element) => ({
                value: element.id,
                label: element.tipo,
              }))}
              required
              error={"Escolha um Perfil"}
              defaultValue={defaultValues && defaultValues["tipo_campo_markup"]}
              disabled={disabledFields?.some(
                (field: string) => field == "tipo_campo_markup"
              )}
            />
            <InputSelectComponent
              name="bloqueado_campo_markup"
              label="Bloqueado?"
              skipEffect
              formulario={form}
              options={snOptions}
              required
              error={"Escolha um Perfil"}
              defaultValue={
                defaultValues && defaultValues["bloqueado_campo_markup"]
              }
              disabled={disabledFields?.some(
                (field: string) => field == "bloqueado_campo_markup"
              )}
            />
          </InputGroup>
          <InputGroup>
            <InputSelectComponent
              name="adiciona_subtrai_campo_markup"
              label="Função"
              skipEffect
              formulario={form}
              options={calcCampos.map((element) => ({
                value: element.id,
                label: element.calc,
              }))}
              required
              error={"Escolha um Perfil"}
              defaultValue={
                defaultValues && defaultValues["adiciona_subtrai_campo_markup"]
              }
              disabled={disabledFields?.some(
                (field: string) => field == "adiciona_subtrai_campo_markup"
              )}
            />
            <Input
              name="valor_campo_markup"
              label="Valor padrão"
              formulario={form}
              defaultValue={
                defaultValues && defaultValues["valor_campo_markup"]
              }
              mascara="numero"
              clearBtn
            />

            {/* {vinculaPotencia && (
          <div className="w-full items-center flex-col flex pt-3">
            <label> Selecione um range da potência</label>
            <span className="text-sm flex text-center">
              {parseFloat(valor[0])} - {parseFloat(valor[1])}
            </span>
            <Slider
              className=" !py-0 !pt-4"
              onChange={handleChange}
              defaultValue={valor}
              max={valorMaxPotencia}
              min={valorMinPotencia}
              step={0.1}
            />
          </div>
        )} */}
          </InputGroup>
        </div>
        <div className="bg-[rgb(228,228,231)] w-[1.6px]"></div>
        <div className="w-full relative">
          <Tooltip
            title={`Não é possível vincular por potência e módulos simultaneamente`}
            className="absolute top-0 right-0"
          >
            <button type="button">
              <IoMdInformationCircleOutline />
            </button>
          </Tooltip>
          <InputGroup>
            <InputSelectComponent
              name="vincular_potencia_campo_markup"
              label="Vincular Potência?"
              formulario={form}
              options={snOptions}
              onChange={(e: any) => {
                setVinculaPotencia(e.value == 1);
                if (vinculaQtdModulos && e.value == 1) {
                  setVinculaQtdModulos(e.value != 1);
                  form.setValue(
                    "vincular_modulo_campo_markup" as never,
                    {
                      label: "Não",
                      value: `0`,
                    } as never
                  );
                }
              }}
              defaultValue={
                defaultValues && defaultValues["vincular_potencia_campo_markup"]
              }
              skipEffect
            />

            {vinculaPotencia && (
              <>
                <Input
                  name="min_potencia_markup"
                  label="De"
                  formulario={form}
                  mascara="numero"
                  defaultValue={
                    defaultValues && defaultValues["min_potencia_markup"]
                  }
                  onChange={(e) => {
                    // if (
                    //   +FormatFields.desformatarNumeros(e.target.value) >
                    //   +FormatFields.desformatarNumeros(
                    //     form.control._formValues?.max_potencia_markup
                    //   )
                    // ) {
                    //   form.control.setError("min_potencia_markup" as "root", {
                    //     type: "required",
                    //     message: "Não pode ser maior que o valor máximo",
                    //   });
                    // } else {
                    //   form.clearErrors("min_potencia_markup" as never);
                    // }
                  }}
                />
                <Input
                  name="max_potencia_markup"
                  label="Até"
                  formulario={form}
                  mascara="numero"
                  defaultValue={
                    defaultValues && defaultValues["max_potencia_markup"]
                  }
                />
              </>
            )}
          </InputGroup>

          <InputGroup>
            <InputSelectComponent
              name="vincular_modulo_campo_markup"
              label="Vincular Quantidade de Módulos?"
              formulario={form}
              options={snOptions}
              onChange={(e: any) => {
                setVinculaQtdModulos(e.value == 1);

                if (e.value == 1) {
                  form.setValue(
                    "tipo_campo_markup" as never,
                    { label: "Valor", value: "0" } as never
                  );
                  setDisabledFields(["tipo_campo_markup"]);
                } else {
                  setDisabledFields([]);
                }
                form.reload();

                if (vinculaPotencia && e.value == 1) {
                  setVinculaPotencia(e.value != 1);
                  form.setValue(
                    "vincular_potencia_campo_markup" as never,
                    {
                      label: "Não",
                      value: `0`,
                    } as never
                  );
                }
              }}
              defaultValue={
                defaultValues && defaultValues["vincular_modulo_campo_markup"]
              }
              // skipEffect
            />
            {vinculaQtdModulos && (
              <>
                <Input
                  name="min_modulo_markup"
                  label="De"
                  formulario={form}
                  mascara="numerico"
                  defaultValue={
                    defaultValues && defaultValues["min_modulo_markup"]
                  }
                  onChange={(e) => {
                    if (e.target.value == "") {
                      form.setValue(
                        "min_modulo_markup" as never,
                        null as never
                      );
                    }
                  }}
                />
                <Input
                  name="max_modulo_markup"
                  label="Até"
                  formulario={form}
                  mascara="numerico"
                  defaultValue={
                    defaultValues && defaultValues["max_modulo_markup"]
                  }
                  onChange={(e) => {
                    if (e.target.value == "") {
                      form.setValue(
                        "max_modulo_markup" as never,
                        null as never
                      );
                    }
                  }}
                />
              </>
            )}
          </InputGroup>
          <InputGroup>
            <InputSelectComponent
              name="vincular_telhado_campo_markup"
              label="Vincular telhados?"
              formulario={form}
              options={snOptions}
              onChange={(e: any) => setVinculaTelhados(e.value == 1)}
              defaultValue={
                defaultValues && defaultValues["vincular_telhado_campo_markup"]
              }
              skipEffect
            />
            {vinculaTelhados && (
              <InputSelectComponent
                name="telhados_modulo_markup"
                label="Selecione os telhados"
                formulario={form}
                options={telhados}
                isMulti
                defaultValue={
                  defaultValues && defaultValues["telhados_modulo_markup"]
                }
              />
            )}
          </InputGroup>
        </div>
      </InputGroup>

      {children}
    </form>
  );
};

export default FormMarkup;