import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import LoaderSun from "@/components/common/Loader/LoaderSun";
import { editarLixeira } from "@/requests/CRM/Lixeira/editarLixeira";
import { listarLixeira } from "@/requests/CRM/Lixeira/listarLixeira";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { GetForm } from "@/utils";
import { useEffect, useState } from "react";
import * as yup from "yup";

const LixeiraConfigComponent = () => {
  const [yupSchema, setYupSchema] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));
  const [isLoading, setIsLoading] = useState(false);
  const [diasLixeira, setDiasLixeira] = useState(undefined);
  const [isLoaded, setIsLoaded] = useState(false);

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


  function onSubmitFunction(data: any) {
    setIsLoading(true);
    editarLixeira(data).finally(() => {
      setIsLoading(false);
    });
  }

  useEffect(() => {
    listarLixeira().then((res: any) => {
      setDiasLixeira(res.dias_lixeira);
      setIsLoaded(true);
    });
  }, []);

  return isLoaded ? (
    <form
      onSubmit={handleSubmit(onSubmitFunction)}
      className={` ${isMobile? "w-full":"w-[50%] min-w-[400px]"} flex flex-col gap-3 mx-auto` }
    >
      <Input
        name="dias_lixeira"
        label="Dias para exclusão definitiva dos documentos"
        defaultValue={diasLixeira}
        formulario={form}
        error="Informe o tempo em que um arquivo pode ficar na lixeira antes da exclusão"
        required
        mascara="numerico"
      />
      <div className="w-full flex flex-col items-center justify-center">
        <Button loading={isLoading}>Salvar</Button>
      </div>
    </form>
  ) : (
    <div className="w-full h-[500px] flex flex-col justify-center items-center">
      <LoaderSun />
    </div>
  );
};

export default LixeiraConfigComponent;