import Button from "@/components/Forms/Button";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import LoaderSun from "@/components/common/Loader/LoaderSun";
import { listarTodosTiposEdificacao } from "@/requests/CRUD/TiposEdificacao/listarTiposEdificacao";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { IValueLabel } from "@/types/formInterfaces";
import { GetForm } from "@/utils";
import { formatLabelTipoEdificacao } from "@/utils/formatTipoEdificacao";
import { useEffect, useState } from "react";
import { FieldValues } from "react-hook-form";

const FormDadosTecnicosManutencao = ({
  onSubmitFunction,
  defaultValues,
  disabledFields,
  blockEditCard,
  ...rest
}: any) => {
  const { handleSubmit, ...form } = GetForm();
  const [tiposEdificacao, setTiposEdificacao] = useState<IValueLabel[]>([]);
  const [isLoaded, setIsLoaded] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const { isMobile } = useScreenContext();

  useEffect(() => {
    listarTodosTiposEdificacao()
      .then((res) =>
        setTiposEdificacao(
          res.map((tipo: any) => ({
            label: formatLabelTipoEdificacao(tipo),
            value: `${tipo.id_tipo_edificacao}`,
          })),
        ),
      )
      .finally(() => setIsLoaded(true));
  }, []);

  async function onSubmitForm(data: FieldValues) {
    if (blockEditCard) return;
    setIsLoading(true);
    rest.setIsLoading?.(true);

    if (data.tipo_edificacao_coleta?.value) {
      data.tipo_edificacao_coleta = data.tipo_edificacao_coleta.value;
    }

    return onSubmitFunction(data).finally(() => {
      setIsLoading(false);
      rest.setIsLoading?.(false);
    });
  }

  return isLoaded ? (
    <form
      style={{ scale: !isMobile ? "0.9" : "1" }}
      onSubmit={handleSubmit(onSubmitForm)}
      {...rest}
    >
      <p className="mb-2 text-lg text-black dark:text-white font-semibold">
        Dados Técnicos
      </p>
      <InputGroup className="pt-2">
        <InputSelectComponent
          name="tipo_edificacao_coleta"
          label="Tipo de Edificação"
          formulario={form}
          options={tiposEdificacao}
          required
          error="Selecione o Tipo de Edificação"
          defaultValue={
            defaultValues && defaultValues.tipo_edificacao_coleta
          }
          disabled={
            blockEditCard ||
            disabledFields?.some(
              (field: string) => field === "tipo_edificacao_coleta",
            )
          }
          skipEffect
        />
      </InputGroup>
      {!blockEditCard && (
        <div className="flex justify-end mt-4">
          <Button type="submit" disabled={isLoading}>
            Salvar
          </Button>
        </div>
      )}
    </form>
  ) : (
    <div className="w-full h-[200px] flex justify-center items-center">
      <LoaderSun />
    </div>
  );
};

export default FormDadosTecnicosManutencao;