import Button from "@/components/Forms/Button";
import Container from "@/components/Forms/Container";
import Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import { importacaoIrradiacao } from "@/requests/CRUD/IrradiacaoGlobal/listarIrradiacao";
import { GetForm } from "@/utils";
import { useState } from "react";
import { HiOutlineCloudDownload, HiOutlineCloudUpload } from "react-icons/hi";
import { toast } from "react-toastify";
import * as yup from "yup";

const ImportacoesIrradiacoes = () => {
  const [formYupScheme, setFormYupScheme] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));

  const { handleSubmit: formHandleSubmit } = GetForm(
    formYupScheme,
    setFormYupScheme
  );

  const [arquivoImportacao, setArquivoImportacao] = useState<any>("");

  const [isLoading, setIsLoading] = useState(false);

  const handleDownload = () => {
    const link = document.createElement("a");
    link.href = "/arquivos/importacao_irradiacao.xlsx";
    link.setAttribute("download", "importacao_irradiacao.xlsx");
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  const handleChangeForm = async (data: any) => {
    data["arquivo"] = arquivoImportacao;

    setIsLoading(true);
    importacaoIrradiacao(data).finally(() => {
      setIsLoading(false);
    });
  };

  return (
    <>
      {/*
       * OS: 323047
       * Data: 23/04/2024
       * Leonardo
       */
      /* <Breadcrumb pageName='Importação de Irradiações' /> */}

      <Container className="mb-6">
        <div className="flex flex-col justify-end items-end mt-2">
          <Button
            onClick={handleDownload}
            className="w-full xl:w-1/6 h-[1.8rem] rounded bg-primary p-3 font-medium text-gray flex items-center title-md text-center justify-center"
          >
            <div className="mr-2">
              <HiOutlineCloudDownload />
            </div>
            Modelo Padrão
          </Button>
        </div>

        <form
          className="flex flex-col gap-4"
          onSubmit={formHandleSubmit(handleChangeForm)}
        >
          <InputGroup className="mt-5">
            <Input
              name="arquivo"
              type="file"
              isImportScreen={true}
              typeFile="*"
              required
              error="Insira um arquivo Excel"
              className="w-60 h-60 rounded"
              onInputProp={(event: any) => {
                const inputElement = event.target as HTMLInputElement;

                if (inputElement.files && inputElement.files.length > 0) {
                  const file = inputElement.files[0];
                  const extension = file.name.split(".").pop()?.toLowerCase();

                  if (extension !== "csv" && extension !== "xlsx") {
                    inputElement.value = "";
                    toast.error("O arquivo precisa ser Excel ou CSV!");
                    return;
                  }

                  inputElement.alt;
                  const reader = new FileReader();
                  reader.onloadend = () => {
                    const base64String = reader.result as string;
                    setArquivoImportacao(base64String);
                  };

                  reader.readAsDataURL(file);
                }
                return 1;
              }}
            />
          </InputGroup>
          <div className="flex flex-col justify-center items-center">
            <Button
              type="submit"
              className="w-full xl:w-[210px] h-[2.8rem] mt-8.5 rounded bg-primary p-3 font-medium text-gray flex items-center text-center justify-center"
              loading={isLoading}
            >
              <div className="mr-3">
                <HiOutlineCloudUpload />
              </div>
              Importar Irradiações
            </Button>
          </div>
        </form>
      </Container>
    </>
  );
};

export default ImportacoesIrradiacoes;