import Button from "@/components/Forms/Button";
import ModalComponente from "@/components/Modal/ModalComponente";
import LoaderSun from "@/components/common/Loader/LoaderSun";
import { obterClienteLinksun } from "@/requests/CRUD/ClienteLinksun/obterCliente";
import { cadastrarLojas } from "@/requests/CRUD/Lojas/cadastrarLojas";
import { editarLojas } from "@/requests/CRUD/Lojas/editarLojas";
import { listarLojas } from "@/requests/CRUD/Lojas/listarLojas";
import { baixarAwsBase64 } from "@/requests/common/Aws/baixarAws";
import { useAuth } from "@/src/contexts/authContext";
import { useEffect, useState } from "react";
import { FieldValues } from "react-hook-form";
import { CiImageOff } from "react-icons/ci";
import { FaPlus } from "react-icons/fa";
import FormLojas from "../CXESCFG001/Lojas/formLojas";

const LojasView = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [lojas, setLojas] = useState<any>([]); // [{}
  const [openCreateLoja, setOpenCreateLoja] = useState(false);
  const [integradorData, setIntegradorData] = useState<any>(false);
  const { valuesSession } = useAuth();
  const { session } = valuesSession();
  const [openModalEdit, setOpenModalEdit] = useState(false);
  const [selectedLoja, setSelectedLoja] = useState<any>([]);
  const [imagens, setImagens] = useState<any>({});

  useEffect(() => {
    obterClienteLinksun(session.sigla).then((res) => {
      setIntegradorData(res);
    });
    listarLojas(session.id_usuario).then((res) => setLojas(res));
  }, []);

  const submitLojas = (data: FieldValues) => {
    const formData = new FormData();
    Object.keys(data).forEach((key) => {
      formData.append(key, data[key]);
    });
    setIsLoading(true);
    cadastrarLojas(formData)
      .finally(() => setIsLoading(false))
      .then(() => {
        listarLojas(session.id_usuario).then((res) => setLojas(res));
        setOpenCreateLoja(!openCreateLoja);
      });
  };

  const editLojas = async (data: FieldValues) => {
    data["id_loja"] = selectedLoja.id_loja;
    const formData = new FormData();
    Object.keys(data).forEach((key) => {
      formData.append(key, data[key]);
    });
    setIsLoading(true);
    editarLojas(formData)
      .finally(() => setIsLoading(false))
      .then(() => {
        listarLojas(session.id_usuario).then((res) => setLojas(res));

        setOpenModalEdit(!openModalEdit);
      });
  };

  useEffect(() => {
    lojas.forEach((item: any) => {
      if (item["foto_loja"] == "null") return;
      baixarAwsBase64(item["foto_loja"]).then((result) => {
        const resultObject =
          typeof result === "string" ? JSON.parse(result) : result;
        const base64Content = resultObject.base64;

        setImagens((prevState: any) => ({
          ...prevState,
          [item.id_loja]: base64Content,
        }));
      });
    });
  }, [lojas]);

  return integradorData ? (
    <>
      <div className="w-full text-lg text-gray-800 dark:text-white text-center flex flex-col items-center gap-3">
        Atualmente você está utilizando {lojas.length} de{" "}
        {integradorData.lojasPermitidas_cliente_linksun} lojas contratadas.
        {lojas.length < integradorData.lojasPermitidas_cliente_linksun && (
          <div
            className="cursor-pointer bg-primary text-white text-base px-4 py-2 rounded-md flex items-center justify-center hover:bg-primary-600 transition-all duration-200 shadow-lg"
            onClick={() => setOpenCreateLoja(true)}
          >
            Adicionar Loja <FaPlus className="ml-2" size={16} />
          </div>
        )}
      </div>
      <div className="w-full grid grid-cols-3 gap-4 mb-4 mt-4">
        {lojas.map((item: any) => (
          <div
            key={item.id_loja}
            className="rounded-lg border p-4 cursor-pointer shadow-lg"
            onClick={() => {
              setOpenModalEdit(true), setSelectedLoja(item);
            }}
          >
            <div className="flex flex-row items-center">
              <div className="w-25 h-25 overflow-hidden rounded-full bg-gray-200">
                {imagens[item.id_loja] ? (
                  <img
                    src={`data:image/jpeg;base64,${imagens[item.id_loja]}`}
                    alt="loja"
                    className="w-full h-full object-cover"
                  />
                ) : (
                  <div className="w-full h-full flex items-center justify-center text-gray-500">
                    <CiImageOff size={36} />
                  </div>
                )}
              </div>
              <div className="ml-4">
                <h2 className="text-lg font-semibold">{item.nome_loja}</h2>
                <p className="text-sm text-gray-600">
                  {item.cidade_loja}, {item.estado_loja}
                </p>
                <p className="text-sm text-gray-600">{item.telefone_loja}</p>
                <p className="text-sm text-gray-600">{item.cnpj_loja}</p>
                <p className="text-sm text-gray-600">{item.endereco_loja}</p>
              </div>
            </div>
          </div>
        ))}
      </div>
      <ModalComponente
        hasForm={false}
        header={"Adicionar Loja"}
        classNameBody="p-0 py-0"
        opened={openCreateLoja}
        onClose={() => setOpenCreateLoja(false)}
        hasSaveButton={false}
      >
        <div className="px-8 py-2">
          <FormLojas onSubmitFunction={submitLojas}>
            <div className="w-full flex flex-col items-center justify-center">
              <Button className="max-sm:w-full" loading={isLoading}>
                Salvar
              </Button>
            </div>
          </FormLojas>
        </div>
      </ModalComponente>
      <ModalComponente
        hasForm={false}
        header={"Editar Loja " + selectedLoja.nome_loja}
        opened={openModalEdit}
        onClose={() => setOpenModalEdit(false)}
        hasSaveButton={false}
      >
        <div className="p-2">
          <FormLojas onSubmitFunction={editLojas} defaultValues={selectedLoja}>
            <div className="w-full flex flex-col items-center justify-center">
              <Button className="max-sm:w-full" loading={isLoading}>
                Salvar
              </Button>
            </div>
          </FormLojas>
        </div>
      </ModalComponente>
    </>
  ) : (
    <div className="w-full h-[500px] flex flex-col justify-center items-center">
      <LoaderSun />
    </div>
  );
};

export default LojasView;