import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import { baixarAwsBase64 } from "@/requests/common/Aws/baixarAws";
import { useAuth } from "@/src/contexts/authContext";
import { useImagemContext } from "@/src/contexts/imageContext";
import { GetForm } from "@/utils";
import { useEffect, useState } from "react";

const FormTipoTarefa = ({ onSubmitFunction, defaultValues, ...rest }: any) => {
  const { handleSubmit, ...form } = GetForm();
  const [iconFile, setIconFile] = useState<File | null>(null);
  const [iconBase64, setIconBase64] = useState<string | null>(null);
  const { imagens, setImagens } = useImagemContext();
  const [color, setColor] = useState<string | null>(
    defaultValues?.cor_tarefa || null
  );
  const { valuesSession } = useAuth();
  const { session } = valuesSession();

  const submitFunction = async (data: any) => {
    if (defaultValues["id_tipo_tarefa"]) {
      data["id_tipo_tarefa"] = defaultValues["id_tipo_tarefa"];
    }
    if (defaultValues["icone_tipo_tarefa"]) {
      data["caminho_icone_tipo_tarefa"] = defaultValues["icone_tipo_tarefa"];
    }
    data["icone_tipo_tarefa"] = iconFile;
    data["usuarioCriacao_tipo_tarefa"] = session.id_usuario;
    delete data["cor_hex"];
    return onSubmitFunction(data);
  };

  useEffect(() => {
    const fetchImage = async (
      url: string | null,
      setFile: any,
      setBase64: any
    ) => {
      if (!url || url === "null") return;

      if (imagens[url]) {
        setBase64(imagens[url]);
        return;
      }

      try {
        const result = await baixarAwsBase64(url);
        const resultObject =
          typeof result === "string" ? JSON.parse(result) : result;
        const base64Content = resultObject.base64;

        const byteArray = new Uint8Array(
          atob(base64Content)
            .split("")
            .map((char) => char.charCodeAt(0))
        );
        const blob = new Blob([byteArray], {
          type: "application/octet-stream",
        });
        const fileName: any = url.split("/").pop();
        const file = new File([blob], fileName, { type: blob.type });

        setFile(file);
        setBase64(base64Content);
        setIconFile(file);

        // Salvar a imagem no contexto global
        setImagens((prev: any) => ({ ...prev, [url]: base64Content }));
      } catch (err) {
        console.error(`Erro ao baixar imagem: ${url}`, err);
      }
    };

    if (defaultValues) {
      const shouldFetchIcon = !iconBase64 && !iconFile;

      if (!shouldFetchIcon) return;

      const promises = [];
      if (shouldFetchIcon) {
        promises.push(
          fetchImage(
            defaultValues.icone_tipo_tarefa,
            setIconFile,
            setIconBase64
          )
        );
      }
    }
  }, [defaultValues]);

  return (
    <div className="p-4" {...rest}>
      <form onSubmit={handleSubmit(submitFunction)} className="space-y-4">
        <InputGroup>
          <Input
            name="nome_tipo_tarefa"
            label="Nome da Tarefa"
            formulario={form}
            required
            error="Preencha o Nome da Tarefa!"
            defaultValue={defaultValues?.nome_tipo_tarefa}
          />
          <div className="flex flex-col gap-2">
            <label
              htmlFor="cor_tarefa"
              className="text-sm font-medium text-gray-700"
            >
              Cor da Tarefa
            </label>
            <div className="flex items-center gap-3">
              <div className="relative">
                <input
                  id="cor_tarefa"
                  name="cor_tipo_tarefa"
                  type="color"
                  className="absolute w-full h-full opacity-0 cursor-pointer"
                  onChange={(e) => {
                    const value = e.target.value;
                    setColor(value);
                    form.setValue("cor_tipo_tarefa", value);
                    form.setValue("cor_hex", value);
                  }}
                />
                <div className="w-10 h-10 rounded-lg border-2 border-gray-200 shadow-sm overflow-hidden">
                  <div
                    className="w-full h-full rounded-[6px] transition-all hover:scale-105"
                    style={{
                      backgroundColor: color || defaultValues?.cor_tipo_tarefa,
                    }}
                  />
                </div>
              </div>

              <div className="flex-1">
                <Input
                  name="cor_hex"
                  type="text"
                  formulario={form}
                  disabled
                  className="font-mono text-sm uppercase"
                  maxLength={7}
                  defaultValue={defaultValues?.cor_tipo_tarefa}
                />
              </div>
            </div>
          </div>
        </InputGroup>

        <Input
          name="icone_tipo_tarefa"
          formulario={form}
          label="Ícone da Tarefa"
          type="file"
          accept="image/*"
          onInputProp={(event: any) => {
            const file = event.target.files[0];
            if (file) {
              setIconFile(file);
              const reader = new FileReader();
              reader.readAsDataURL(file);
            }
          }}
          defaultValue={defaultValues?.icone_tipo_tarefa && iconBase64}
          onRemoveFile={() => {
            setIconFile(null);
            setIconBase64(null);
            form.setValue("icone_tipo_tarefa", "");
          }}
        />
        <div className="flex justify-end w-full">
          <Button type="submit">Salvar</Button>
        </div>
      </form>
    </div>
  );
};

export default FormTipoTarefa;