import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { GetForm } from "@/utils";
import { useState } from "react";

const FormConclusaoDemanda = ({
  onSubmitFunction,
  problemas,
  tiposServico,
  defaultValues,
}: any) => {
  const [isLoading, setIsLoading] = useState(false);
  const [problemaValue, setProblemaValue] = useState();
  const [gerarCorretiva, setGerarCorretiva] = useState();

  const { handleSubmit: handleConcluir, ...formConcluir } = GetForm();

  const onSubmitConcluir = (data: any) => {
    setIsLoading(true);
    return onSubmitFunction(data).finally(() => setIsLoading(false));
  };

  return (
    <form
      onSubmit={handleConcluir(onSubmitConcluir)}
      className="flex flex-col gap-3"
    >
      <InputSelectComponent
        name="problema_resolvido"
        label="Problema Resolvido"
        formulario={formConcluir}
        skipEffect
        width="xl:w-[350px]"
        options={[
          { label: "Sim", value: "1" },
          { label: "Não", value: "0" },
        ]}
        onChange={(e: any) => setProblemaValue(e.value)}
      />
      {problemaValue == "0" && (
        <>
          <InputSelectComponent
            skipEffect
            formulario={formConcluir}
            label="Motivo Não Resolvido"
            name="motivo_naoResolvido_demanda"
            // width="xl:w-[250px]"
            options={problemas.map((e: any) => ({
              value: e.id_problema_n_resolvido,
              label: e.nome_problema_n_resolvido,
            }))}
          />
          <InputSelectComponent
            name="gerar_manutencao_corretiva"
            label="Gerar Negócio de Manutenção Corretiva?"
            formulario={formConcluir}
            width="xl:w-[350px]"
            options={[
              { label: "Sim", value: "1" },
              { label: "Não", value: "0" },
            ]}
            skipEffect
            onChange={(e: any) => {
              setGerarCorretiva(e.value);

              if (e.value === "0") {
                formConcluir.control.unregister(
                  ["tipo_servico", "qtdModulos_coleta"] as never[],
                  {
                    keepDirty: false,
                    keepValue: false,
                    keepError: false,
                  }
                );
                formConcluir.setYupSchema((prev: any) => {
                  const fields: any = prev.fields;
                  delete fields["tipo_servico"];
                  delete fields["qtdModulos_coleta"];
                  prev.fields = fields;
                  return prev;
                });
              }
            }}
          />
          {gerarCorretiva == "1" && (
            <>
              <InputSelectComponent
                name="tipo_servico"
                label="Tipo de Serviço"
                formulario={formConcluir}
                options={tiposServico
                  ?.filter(
                    (tipoServico: any) =>
                      tipoServico?.categoria_tipo_servico == "1"
                  )
                  ?.map((tipoServico: any) => ({
                    label: tipoServico?.nome_tipo_servico,
                    value: tipoServico?.id_tipo_servico,
                  }))}
                required
                error={"Informe o tipo de serviço"}
              />
              <Input
                name="qtdModulos_coleta"
                label="Quantidade de Módulos"
                mascara="numerico"
                formulario={formConcluir}
                required
                error={"Preencha a Quantidade de Módulos"}
                defaultValue={
                  defaultValues && defaultValues?.modulosDigitado_proposta
                }
              />
            </>
          )}
        </>
      )}
      <InputGroup>
        <Input
          name="obs"
          label="Observação"
          type="textarea"
          formulario={formConcluir}
        />
      </InputGroup>
      <div className="flex justify-end">
        <Button loading={isLoading} className="mt-3">
          Concluir
        </Button>
      </div>
    </form>
  );
};

export default FormConclusaoDemanda;