import Input from "@/components/Forms/Input";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { GetForm } from "@/utils";
import { useState } from "react";

const FormTiposServico = ({
  onSubmitFunction,
  defaultValues,
  disabledFields,
  children,
  prioridades,
  usuarios,
  categoriasTipoServico,
  tiposPeriodo,
  ...rest
}: any) => {
  const { handleSubmit, ...form } = GetForm();
  const { isMobile } = useScreenContext();
  const [categoria_tipo_servico, setCategoria_tipo_servico] = useState(
    defaultValues && defaultValues["categoria_tipo_servico"]
  );

  return (
    <form onSubmit={handleSubmit(onSubmitFunction)} {...rest}>
      <fieldset
        className={`border border-gray-300 p-4 rounded-lg col-span-2 flex flex-${isMobile ? "col" : "row"} flex-wrap gap-3`}
        key={form.key}
      >
        <Input
          name="nome_tipo_servico"
          label="Nome do Serviço"
          formulario={form}
          error={"Informe o Nome"}
          required
          defaultValue={defaultValues && defaultValues["nome_tipo_servico"]}
          disabled={disabledFields?.some(
            (field: string) => field == "nome_tipo_servico"
          )}
          width={"flex-1"}
        />
        <InputSelectComponent
          name="categoria_tipo_servico"
          label="Categoria"
          formulario={form}
          options={categoriasTipoServico}
          error={"Informe a Categoria"}
          required
          defaultValue={
            defaultValues && defaultValues["categoria_tipo_servico"]
          }
          disabled={disabledFields?.some(
            (field: string) => field == "categoria_tipo_servico"
          )}
          width={"flex-1"}
          onChange={(e: any) => {
            setCategoria_tipo_servico(e?.value);
            if (e?.value == "0") {
              form.setValue("cod_prioridade_servico", "");
              form.setValue("cod_responsavel_servico", "");
            } else {
              form.control.unregister(
                ["cod_tipoPeriodo_tipo_servico"] as never[],
                {
                  keepValue: false,
                  keepError: false,
                }
              );
              form.control.unregister(["periodo_tipo_servico"] as never[], {
                keepValue: false,
                keepError: false,
              });
              form.setValue("cod_tipoPeriodo_tipo_servico", "");
              form.setValue("periodo_tipo_servico", "");
            }
            form.reload();
          }}
          skipEffect
        />
        <Input
          name="especificacoes_tipo_servico"
          label="Especificações para a Proposta"
          type="textarea"
          formulario={form}
          // error={"Informe o Nome"}
          // required
          defaultValue={
            defaultValues && defaultValues["especificacoes_tipo_servico"]
          }
          disabled={disabledFields?.some(
            (field: string) => field == "especificacoes_tipo_servico"
          )}
          width={"w-full"}
        />
        <Input
          name="informacoesadd_tipo_servico"
          label="Informações Adicionais da Proposta"
          formulario={form}
          // error={"Informe o Nome"}
          // required
          defaultValue={
            defaultValues && defaultValues["informacoesadd_tipo_servico"]
          }
          disabled={disabledFields?.some(
            (field: string) => field == "informacoesadd_tipo_servico"
          )}
          width={"w-full"}
        />
        {categoria_tipo_servico &&
          (categoria_tipo_servico == "0" ? (
            <>
              <InputSelectComponent
                name="cod_tipoPeriodo_tipo_servico"
                label="Tipo de Período"
                formulario={form}
                options={tiposPeriodo}
                error={"Informe o Tipo de Período"}
                required
                defaultValue={
                  defaultValues && defaultValues["cod_tipoPeriodo_tipo_servico"]
                }
                disabled={disabledFields?.some(
                  (field: string) => field == "cod_tipoPeriodo_tipo_servico"
                )}
                width={"flex-1"}
                dynamic
              />
              <Input
                name="periodo_tipo_servico"
                label="Período"
                formulario={form}
                mascara="numerico"
                error={"Informe o Período"}
                required
                defaultValue={
                  defaultValues && defaultValues["periodo_tipo_servico"]
                }
                disabled={disabledFields?.some(
                  (field: string) => field == "periodo_tipo_servico"
                )}
                width={"flex-1"}
                dynamic
              />
            </>
          ) : (
            <>
              <InputSelectComponent
                name="cod_prioridade_servico"
                label="Prioridade"
                formulario={form}
                options={prioridades.map((prioridade: any) => ({
                  label: prioridade?.nome_prioridade,
                  value: prioridade?.id_prioridade,
                }))}
                // error={"Informe a Prioridade"}
                // required
                defaultValue={
                  defaultValues && defaultValues["cod_prioridade_servico"]
                }
                disabled={disabledFields?.some(
                  (field: string) => field == "cod_prioridade_servico"
                )}
                width={"flex-1"}
                dynamic
              />
              <InputSelectComponent
                name="cod_responsavel_servico"
                label="Responsável"
                formulario={form}
                options={usuarios.map((usuario: any) => ({
                  label: usuario?.nome_usuario,
                  value: usuario?.id_usuario,
                }))}
                // error={"Informe o Responsável"}
                // required
                defaultValue={
                  defaultValues && defaultValues["cod_responsavel_servico"]
                }
                disabled={disabledFields?.some(
                  (field: string) => field == "cod_responsavel_servico"
                )}
                width={"flex-1"}
                dynamic
              />
            </>
          ))}
      </fieldset>
      {children}
    </form>
  );
};

export default FormTiposServico;