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 { baixarAwsBase64 } from "@/requests/common/Aws/baixarAws";
import { listarUsuario } from "@/requests/CRM/agenda";
import { GetForm } from "@/utils";
import { useEffect, useState } from "react";

const FormPagamentoManual = ({ onSubmitFunction, defaultValues }: any) => {
  const formPagamentoManual = GetForm();
  const [erroDataPagamento, setErroDataPagamento] = useState(false);
  const [anexoPagamento, setAnexoPagamento] = useState<any>();

  const [usuarios, setUsuarios] = useState<any[]>([]);
  const [imagemFile, setImagemFile] = useState<any>();
  const [imagemBase64, setImagemBase64] = useState<any>();
  const pagamentoManualFunction = (data: any) => {
    data["data_lancamento_manual"] = new Date().toISOString();
    data["anexo_lancamento_manual"] = anexoPagamento;
    data["status_lancamento_manual"] = 1;
    onSubmitFunction(data);
  };

  useEffect(() => {
    listarUsuario().then((response) => {
      setUsuarios(response);
    });
  }, []);

  useEffect(() => {
    if (defaultValues && defaultValues["anexo_lancamento_manual"]) {
      const toastPromise = new Promise(async (resolve, reject) => {
        try {
          const result = await baixarAwsBase64(
            defaultValues["anexo_lancamento_manual"]
          );

          const resultObject =
            typeof result === "string" ? JSON.parse(result) : result;
          const base64Content = resultObject.base64;

          const byteCharacters = atob(base64Content);
          const byteNumbers = new Array(byteCharacters.length);
          for (let i = 0; i < byteCharacters.length; i++) {
            byteNumbers[i] = byteCharacters.charCodeAt(i);
          }
          const byteArray = new Uint8Array(byteNumbers);
          const blob = new Blob([byteArray], {
            type: "application/octet-stream",
          });

          const fileName = defaultValues["anexo_lancamento_manual"]
            .split("/")
            .pop();
          const file = new File([blob], fileName, { type: blob.type });

          setImagemFile(file);
          setImagemBase64(base64Content);
          resolve("File loaded successfully");
        } catch (err) {
          console.error("err", err);
          reject("Error loading file");
        }
      });
    }
  }, [defaultValues]);

  return (
    <form
      onSubmit={formPagamentoManual.handleSubmit(pagamentoManualFunction)}
      key={formPagamentoManual.key}
    >
      <div className=" gap-5 items-center justify-center">
        <div>
          <InputGroup>
            <Input
              formulario={formPagamentoManual}
              name="datetime_lancamento_manual"
              label="Data"
              dynamic={true}
              type="date"
              error="Preencha a data do pagamento!"
              required
              onChange={(event: any) => {
                if (
                  event.target.value > new Date().toISOString().split("T")[0]
                ) {
                  setErroDataPagamento(true);
                  formPagamentoManual.setError(
                    "datetime_lancamento_manual" as never,
                    {
                      type: "manual",
                      message: "Data de pagamento inválida",
                    }
                  );
                } else {
                  setErroDataPagamento(false);
                  formPagamentoManual.clearErrors(
                    "datetime_lancamento_manual" as never
                  );
                }
              }}
              defaultValue={defaultValues?.datetime_lancamento_manual}
            />

            <Input
              formulario={formPagamentoManual}
              name="nome_lancamento_manual"
              required
              label="Nome do Lançamento"
              type="text"
              defaultValue={defaultValues?.nome_lancamento_manual}
            />
            <InputSelectComponent
              formulario={formPagamentoManual}
              name="tipo_lancamento_manual"
              label="Tipo do Lançamento"
              required
              options={[
                { value: "1", label: "Crédito" },
                { value: "0", label: "Débito" },
              ]}
              defaultValue={defaultValues?.tipo_lancamento_manual}
            />
            <Input
              formulario={formPagamentoManual}
              name="valor_lancamento_manual"
              label="Valor do Lançamento (R$)"
              required
              mascara="numero"
              defaultValue={defaultValues?.valor_lancamento_manual}
            />
            <InputSelectComponent
              formulario={formPagamentoManual}
              name="usuarioContaCorrente_lancamento_manual"
              required
              label="Usuário Conta Corrente"
              options={usuarios.map((usuario) => ({
                value: usuario.id_usuario,
                label: usuario.nome_usuario,
              }))}
              defaultValue={defaultValues?.usuario}
              disabled
            />
          </InputGroup>
        </div>
        <div className="flex flex-row gap-5">
          <Input
            formulario={formPagamentoManual}
            name="observacoes_lancamento_manual"
            label="Observação"
            type="textarea"
            rows={10}
            defaultValue={defaultValues?.observacoes_lancamento_manual}
          />
          <Input
            formulario={formPagamentoManual}
            className="w-[200px] h-[2px]"
            name="anexo_lancamento_manual"
            label="Anexo"
            type="file"
            accept="image/*"
            onInputProp={(event: any) => {
              const inputElement = event.target as HTMLInputElement;

              if (inputElement.files && inputElement.files.length > 0) {
                const file = inputElement.files[0];
                const reader = new FileReader();
                reader.onloadend = () => {
                  const base64String = reader.result as string;

                  setAnexoPagamento(file);
                  // setImagemBase64(base64String);
                };

                reader.readAsDataURL(file);
              }
              return 1;
            }}
            defaultValue={imagemBase64}
          />
        </div>
      </div>
      <div className="w-full flex justify-end gap-3 mt-5">
        <Button disabled={erroDataPagamento}>Gerar</Button>
      </div>
    </form>
  );
};

export default FormPagamentoManual;