"use client";

import Input from "@/components/Forms/Input";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { GetForm, GetGallery } from "@/utils";
import { useEffect, useState } from "react";

import LoaderSun from "@/components/common/Loader/LoaderSun";
import FileRenderer from "@/components/FileRenderer";
import { baixarAwsBase64 } from "@/requests/common/Aws/baixarAws";
import { buscaCep } from "@/services/buscaCep";
import { FaPaperclip } from "react-icons/fa6";
import { MdClose } from "react-icons/md";

const FormEmpresaTerceirizada = ({
  onSubmitFunction,
  defaultValues,
  disabledFields,
  children,
  cidades,
  estados,
  ...rest
}: {
  [x: string]: any;
}) => {
  const [isLoaded, setIsLoaded] = useState(false);
  const [anexos, setAnexos] = useState<any[]>([]);
  const [inputKey, setInputKey] = useState(1);
  const [imageUrls, setImageUrls] = useState<string[]>([]);
  const [isLoadingAnexos, setIsLoadingAnexos] = useState(false);

  const [estadoSelecionado, setEstadoSelecionado] = useState<any>(
    defaultValues.estado_empresa_terceirizada,
  );
  const [cidadeSelecionada, setCidadeSelecionada] = useState<any>(
    defaultValues.cidade_empresa_terceirizada,
  );

  // const [cep, setCep] = useState<string>(
  //   defaultValues.cep_empresa_terceirizada
  // );

  const { handleSubmit, ...form } = GetForm();
  const { openGallery, setGallery } = GetGallery();

  useEffect(() => {
    setIsLoaded(true);
    if (defaultValues && defaultValues["anexos_data"]) {
      const anexos_data = defaultValues["anexos_data"];

      setIsLoadingAnexos(true);
      Promise.all(
        anexos_data.map((data: any) =>
          baixarAwsBase64(data["caminho_anexo_empresa_terceirizada"]).then(
            (res) => {
              const resultObject =
                typeof res === "string" ? JSON.parse(res) : res;
              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 = data["caminho_anexo_empresa_terceirizada"]
                .split("/")
                .pop();
              const file = new File([blob], fileName, { type: blob.type });
              return file;
            },
          ),
        ),
      )
        .then((res) => {
          setAnexos(res);
        })
        .finally(() => setIsLoadingAnexos(false));
    }
  }, []);

  useEffect(() => {
    setInputKey(inputKey + 1);

    const loadImages = async () => {
      const newImageUrls = await Promise.all(
        anexos.map(async (anexo) => {
          const reader = new FileReader();
          return new Promise((resolve) => {
            reader.onload = () => resolve(reader.result as string);
            reader.readAsDataURL(anexo);
          });
        }),
      );
      setImageUrls(newImageUrls as string[]);
      setGallery(
        newImageUrls.map((newImageUrl, index) => ({
          src: newImageUrl as string,
          name: anexos[index].name?.split("/").pop()!,
        })),
      );
    };

    loadImages();
  }, [anexos]);
  const [loadingCep, setLoadingCep] = useState(false);

  const handleCEPChange = async (newCep: any) => {
    // setCep(newCep);

    if (newCep && newCep.length === 9) {
      setLoadingCep(true);
      const formataCep = newCep.replace("-", "");
      const enderecoInfo = await buscaCep(formataCep);

      form.setValue("bairro_empresa_terceirizada", enderecoInfo!.bairro);
      form.setValue("rua_empresa_terceirizada", enderecoInfo!.rua);
      // form.setValue("estado_cliente", enderecoInfo!.estado);
      // form.setValue("cidade_cliente", enderecoInfo!.cidade);

      // setBairro(enderecoInfo!.bairro || "");
      // setLogradouro(enderecoInfo!.rua || "");
      setLoadingCep(false);
      setCidadeSelecionada(enderecoInfo!.cidade);
      setEstadoSelecionado(enderecoInfo!.estado);
    }
  };

  useEffect(() => {
    if (estadoSelecionado != defaultValues.estado_empresa_terceirizada) {
      setCidadeSelecionada(
        cidades.find(
          (cidade: any) =>
            cidade.estado_cidade ==
            estados.find((estado: any) => estado.uf_estado == estadoSelecionado)
              ?.id_estado,
        )?.nome_cidade,
      );
    } else {
      setCidadeSelecionada(defaultValues.cidade_empresa_terceirizada);
    }
    const estado = estados.find(
      (estado: any) => estado.uf_estado == estadoSelecionado,
    );
    form.setValue(
      "estado_empresa_terceirizada",
      estado
        ? {
            label: `${estado.nome_estado} - ${estado.uf_estado}`,
            value: `${estado.uf_estado}`,
          }
        : "",
    );
  }, [estadoSelecionado]);

  useEffect(() => {
    const cidade = cidades.find(
      (cidade: any) => cidade.nome_cidade == cidadeSelecionada,
    );
    form.setValue(
      "cidade_empresa_terceirizada",
      cidade
        ? {
            label: `${cidade.nome_cidade}`,
            value: `${cidade.nome_cidade}`,
          }
        : "",
    );
  }, [cidadeSelecionada]);

  useEffect(() => {
    setGallery(
      anexos.map((anexo) => ({
        src: anexo.src,
        name: anexo.caminho_anexo_empresa_terceirizada?.split("/").pop(),
      })),
    );
  }, [anexos]);

  const adicionarAnexo = (event: any) => {
    const inputElement = event.target as HTMLInputElement;

    if (inputElement.files && inputElement.files.length > 0) {
      let arquivo = inputElement.files[0];
      setAnexos((prev) => {
        // if (prev.some((anexo) => anexo.name == arquivo.name)) {
        let nomeArquivo = arquivo.name?.replaceAll("/", "_");
        let extensao = nomeArquivo.substring(nomeArquivo.lastIndexOf("."));
        let nomeBase = nomeArquivo.substring(0, nomeArquivo.lastIndexOf("."));

        let contador = 0;
        let novoNome = nomeArquivo;
        while (prev.some((anexo) => anexo.name === novoNome)) {
          novoNome = `${nomeBase} (${++contador})${extensao}`;
        }
        arquivo = new File([arquivo], novoNome, {
          type: arquivo.type,
          lastModified: arquivo.lastModified,
        });
        // }

        return [...prev, arquivo];
      });
    }
    setInputKey(inputKey + 1);
  };

  const handleDownload = (anexo: File) => {
    const url = URL.createObjectURL(anexo);
    const link = document.createElement("a");
    link.href = url;
    link.download = anexo.name;
    link.click();
    URL.revokeObjectURL(url);
  };

  function onSubmitFormEmpresaTerceirizada(data: any) {
    data = {
      ...data,
      anexos,
      tipo_empresa_terceirizada: data?.tipo_empresa_terceirizada?.join(","),
    };
    return onSubmitFunction(data);
  }

  return (
    <>
      {isLoaded ? (
        <form
          onSubmit={handleSubmit(onSubmitFormEmpresaTerceirizada)}
          key={form.key}
          {...rest}
        >
          {/* <div>
            <div>Informações Gerais</div>
            <div>Endereço</div>
          </div> */}
          <div className="flex flex-col gap-3">
            <div className={`flex flex-row flex-wrap gap-3`}>
              <Input
                name="nome_empresa_terceirizada"
                label="Nome"
                width={"flex-1 min-w-[350px]"}
                formulario={form}
                error={"Preencha o Nome"}
                required
                defaultValue={
                  defaultValues && defaultValues["nome_empresa_terceirizada"]
                }
              />
              <Input
                name="cnpj_empresa_terceirizada"
                label="CNPJ"
                width={"flex-1 min-w-[350px]"}
                formulario={form}
                mascara="cnpj"
                error={"Preencha o CNPJ"}
                required
                defaultValue={
                  defaultValues && defaultValues["cnpj_empresa_terceirizada"]
                }
              />
              <Input
                name="ie_empresa_terceirizada"
                label="IE"
                width={"flex-1 min-w-[350px]"}
                formulario={form}
                defaultValue={
                  defaultValues && defaultValues["ie_empresa_terceirizada"]
                }
              />
              <Input
                name="responsavel_empresa_terceirizada"
                label="Responsável"
                width={"flex-1 min-w-[350px]"}
                formulario={form}
                error={"Preencha o CNPJ"}
                required
                defaultValue={
                  defaultValues &&
                  defaultValues["responsavel_empresa_terceirizada"]
                }
              />
              <InputSelectComponent
                name="tipo_empresa_terceirizada"
                label="Tipo de empresa"
                width={"flex-1 min-w-[350px]"}
                formulario={form}
                options={[
                  {
                    label: "Prestadora de serviços",
                    value: "prestadora_servicos",
                  },
                  {
                    label: "Fornecedora de produtos",
                    value: "fornecedora_produtos",
                  },
                ]}
                isMulti
                defaultValue={
                  defaultValues && defaultValues["tipo_empresa_terceirizada"]
                }
                required
                error={"Escolha um Gerente"}
              />
              <InputSelectComponent
                name="tipo_contrato_empresa_terceirizada"
                label="Tipo do contrato"
                width={"flex-1 min-w-[350px]"}
                formulario={form}
                options={[
                  {
                    label: "Prestadora de serviços",
                    value: "prestadora_servicos",
                  },
                  {
                    label: "Fornecedora de produtos",
                    value: "fornecedora_produtos",
                  },
                ]}
                defaultValue={
                  defaultValues &&
                  defaultValues["tipo_contrato_empresa_terceirizada"]
                }
                required
                error={"Escolha um Gerente"}
              />
              <Input
                name="data_fundacao_empresa_terceirizada"
                label="Data da fundação"
                width={"flex-1 min-w-[350px]"}
                formulario={form}
                type="date"
                error={"Informe a data da fundação"}
                required
                defaultValue={
                  defaultValues &&
                  defaultValues["data_fundacao_empresa_terceirizada"]
                }
              />
              <Input
                name="forma_pagamento_empresa_terceirizada"
                label="Forma de Pagamento"
                width={"flex-1 min-w-[350px]"}
                formulario={form}
                // error={"Informe a Forma de Pagamento"}
                // required
                defaultValue={
                  defaultValues &&
                  defaultValues["forma_pagamento_empresa_terceirizada"]
                }
              />
              <Input
                name="telefone_empresa_terceirizada"
                label="Telefone"
                width={"flex-1 min-w-[350px]"}
                mascara="telefone"
                formulario={form}
                error={"Informe o Telefone"}
                required
                defaultValue={
                  defaultValues &&
                  defaultValues["telefone_empresa_terceirizada"]
                }
              />
              <Input
                name="email_empresa_terceirizada"
                label="Email"
                width={"flex-1 min-w-[350px]"}
                type="email"
                formulario={form}
                error={"Informe o Email"}
                required
                defaultValue={
                  defaultValues && defaultValues["email_empresa_terceirizada"]
                }
              />
            </div>
            <div className="flex flex-row min-w-[350px] gap-3">
              <Input
                name="inicio_vigencia_empresa_terceirizada"
                label="Início da vigência do contrato"
                width={"flex-1 min-w-[350px]"}
                formulario={form}
                type="date"
                // error={"Informe a data da fundação"}
                // required
                defaultValue={
                  defaultValues &&
                  defaultValues["inicio_vigencia_empresa_terceirizada"]
                }
              />
              <Input
                name="fim_vigencia_empresa_terceirizada"
                label="Fim da vigência do contrato"
                width={"flex-1 min-w-[350px]"}
                formulario={form}
                type="date"
                // error={"Informe a data da fundação"}
                // required
                defaultValue={
                  defaultValues &&
                  defaultValues["fim_vigencia_empresa_terceirizada"]
                }
              />
            </div>
            <div className="flex flex-col gap-3 p-2 border border-bodydark rounded-md">
              <div className="font-semibold">Endereço</div>
              <div className="flex flex-row flex-wrap gap-3">
                <div className="">
                  {loadingCep && (
                    <span className="text-xs text-gray-500 mt-1 block">
                      Buscando endereço...
                    </span>
                  )}

                  <Input
                    name="cep_empresa_terceirizada"
                    label="CEP"
                    width={"flex-1 min-w-[350px]"}
                    formulario={form}
                    mascara="cep"
                    error={"Preencha o CEP"}
                    required
                    disabled={loadingCep}
                    defaultValue={
                      defaultValues && defaultValues["cep_empresa_terceirizada"]
                    }
                    onBlur={(e) => handleCEPChange(e.target.value)}
                  />
                </div>
                <InputSelectComponent
                  name="estado_empresa_terceirizada"
                  label="Estado"
                  width={"flex-1 min-w-[350px]"}
                  formulario={form}
                  options={estados.map((estado: any) => ({
                    label: `${estado.nome_estado} - ${estado.uf_estado}`,
                    value: `${estado.uf_estado}`,
                  }))}
                  required
                  error="Informe o Estado"
                  onChange={(e: any) => setEstadoSelecionado(e.value)}
                  // disabled={cep != "" && cep != "0" && estadoSelecionado != ""}
                  defaultValue={estadoSelecionado}
                />
                <InputSelectComponent
                  name="cidade_empresa_terceirizada"
                  label="Cidade"
                  width={"flex-1 min-w-[350px]"}
                  formulario={form}
                  options={cidades
                    .filter(
                      (cidade: any) =>
                        estados.find(
                          (estado: any) =>
                            estado.uf_estado == estadoSelecionado,
                        )?.id_estado == cidade.estado_cidade,
                    )
                    .map((cidade: any) => ({
                      label: `${cidade.nome_cidade}`,
                      value: `${cidade.nome_cidade}`,
                    }))}
                  required
                  error="Informe a Cidade"
                  // disabled={cep != "" && cep != "0" && cidadeSelecionada != ""}
                  onChange={(e: any) => setCidadeSelecionada(e.value)}
                  defaultValue={cidadeSelecionada}
                />
                <Input
                  name="bairro_empresa_terceirizada"
                  label="Bairro"
                  width={"flex-1 min-w-[350px]"}
                  formulario={form}
                  error={"Preencha o Bairro"}
                  required
                  defaultValue={
                    defaultValues &&
                    defaultValues["bairro_empresa_terceirizada"]
                  }
                />
                <Input
                  name="rua_empresa_terceirizada"
                  label="Rua"
                  width={"flex-1 min-w-[350px]"}
                  formulario={form}
                  error={"Preencha a Rua"}
                  required
                  defaultValue={
                    defaultValues && defaultValues["rua_empresa_terceirizada"]
                  }
                />
                <Input
                  name="numero_empresa_terceirizada"
                  label="Número"
                  width={"flex-1 min-w-[350px]"}
                  formulario={form}
                  // error={"Preencha o Nome"}
                  // required
                  defaultValue={
                    defaultValues &&
                    defaultValues["numero_empresa_terceirizada"]
                  }
                />
              </div>
            </div>
            <div>
              <Input
                name="observacoes_empresa_terceirizada"
                label="Observações"
                width={"flex-1 min-w-[350px]"}
                formulario={form}
                type="textarea"
                defaultValue={
                  defaultValues &&
                  defaultValues["observacoes_empresa_terceirizada"]
                }
              />
            </div>
          </div>
          <div className="pt-1">
            <div className="flex flex-col gap-1 max-h-[200px] overflow-auto">
              {isLoadingAnexos ? (
                <div className="flex justify-center items-center">
                  <LoaderSun height={100} />
                </div>
              ) : (
                imageUrls.map((imageUrl, index) => {
                  const anexo: File = anexos[index];
                  return (
                    <div
                      key={index}
                      className="flex flex-row justify-between px-2 cursor-pointer hover:bg-[rgb(0,0,0)]/[.1] border border-transparent hover:border-black/[0.4] rounded"
                      onClick={() => handleDownload(anexo)}
                    >
                      <div className="w-[400px] overflow-hidden text-ellipsis p-1 flex flex-row items-center gap-1">
                        <figure
                          className="flex flex-col items-center overflow-hidden w-[20%] hover:w-[50%] transition-all"
                          onClick={(e) => {
                            e.stopPropagation();
                            openGallery(index);
                          }}
                        >
                          <FileRenderer
                            src={imageUrl}
                            name={anexo?.name?.split("/").pop()!}
                            className={
                              "h-full w-30 flex flex-col items-center justify-center bg-animate-pulse bg-white rounded overflow-hidden"
                            }
                            width={200}
                          />
                        </figure>
                        {anexo?.name}
                      </div>
                      <button
                        type="button"
                        onClick={(e) => {
                          e.stopPropagation();
                          setAnexos((prev) => {
                            const newAnexos = [...prev];
                            newAnexos.splice(index, 1);
                            return newAnexos;
                          });
                        }}
                      >
                        <MdClose />
                      </button>
                    </div>
                  );
                })
              )}
            </div>
            <label
              htmlFor="add_anexo"
              // htmlFor={indexItem}
              className="justify-center dark:text-white whitespace-nowrap rounded-md font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 text-primary-foreground flex bg-success hover:brightness-90 hover:bg-success text-sm h-fit items-center w-fit m-1 mb-4 p-1 px-2 cursor-pointer"
            >
              <FaPaperclip /> Adicionar Documento
            </label>
            <input
              id="add_anexo"
              // id={indexItem}
              type="file"
              // accept="image/png, image/gif, image/jpeg"
              className="hidden"
              key={inputKey}
              onInput={(e) => adicionarAnexo(e)}
            />
          </div>

          {children}
        </form>
      ) : (
        <div className="flex justify-center w-full">
          <LoaderSun />
        </div>
      )}
    </>
  );
};

export default FormEmpresaTerceirizada;