import {
  getFontsData,
  getLabelsBR,
  getPlugins,
  getTemplate,
} from "@/utils/pdfme/helper";
import { Template, checkTemplate } from "@pdfme/common";
import { Designer } from "@pdfme/ui";
import { useEffect, useRef, useState } from "react";

import LoaderSun from "@/components/common/Loader/LoaderSun";
import { baixarAwsContent } from "@/requests/common/Aws/baixarAws";
import { useContractContext } from "@/src/contexts/ContractProvider";
import { MenuPdfme } from "@/utils/pdfme/MenuPdfme";
import { Maximize, Minimize } from "lucide-react";

const headerHeight = 65;

function DesignerDocumentosPersonalizados({
  designer,
  onSaveTemplate,
  defaultValues,
}: any) {
  const designerRef = useRef<HTMLDivElement | null>(null);
  const [isFullscreen, setIsFullscreen] = useState(false);
  const otherRef = useRef<HTMLDivElement | null>(null);

  // const designer = useRef<Designer | null>(null);
  const { camposRelacionamentosDocs, camposPersonalizadosRelacionamentos } =
    useContractContext();

  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    loadTemplate();
    document.addEventListener("fullscreenchange", () => {
      setIsFullscreen(!!document.fullscreenElement);
    });
    return () => {
      document.removeEventListener("fullscreenchange", () => {});
    };
  }, [designerRef]);

  async function loadTemplate() {
    let template: Template = getTemplate();

    const templateString: string | false =
      defaultValues &&
      (await baixarAwsContent(
        defaultValues["caminho_template_documento_personalizado"]
      ).then(
        (template_documento_personalizado) => template_documento_personalizado
      ));
    const templateJson = templateString
      ? JSON.parse(templateString)
      : getTemplate();
    checkTemplate(templateJson);
    template = templateJson as Template;

    getFontsData().then((font: any) => {
      if (designerRef.current) {
        designer.current = new Designer({
          domContainer: designerRef.current,
          // @ts-ignore
          template,
          options: {
            font,
            labels: getLabelsBR,
            theme: {
              token: {
                colorPrimary: "#25c2a0",
              },
            },
            maxZoom: 500,
          },
          plugins: getPlugins(),
        });
        designer.current.onSaveTemplate(onSaveTemplate);
        setIsLoaded(true);
      }
    });
  }

  const toggleFullscreen = () => {
    if (!isFullscreen) {
      otherRef.current?.requestFullscreen();
    } else {
      document.exitFullscreen();
    }
  };
  return (
    <div ref={otherRef}>
      {!isLoaded ? (
        <div className="w-full h-[500px] flex flex-col justify-center items-center">
          <LoaderSun />
        </div>
      ) : (
        <header
          style={{
            display: "flex",
            justifyContent: "space-between",
            flexDirection: "column",
            gap: "3px",
          }}
        >
          <div className="flex flex-row justify-between w-full">
            <strong style={{ width: "50%" }}>Editor</strong>
          </div>

          <MenuPdfme
            designer={designer}
            relacionamentos={camposRelacionamentosDocs}
            camposPersonalizadosRelacionamentos={
              camposPersonalizadosRelacionamentos
            }
            titulo="Documento Exemplo"
          >
            <button
              className="flex flex-row flex-nowrap absolute right-9 px-2 py-1 text-black"
              type="button"
              onClick={toggleFullscreen}
            >
              <div className="">
                {isFullscreen ? <Minimize /> : <Maximize />}
              </div>
            </button>
          </MenuPdfme>
        </header>
      )}
      <div
        ref={designerRef}
        id="documentosPersonalizadosId"
        style={{
          width: "100%",
          height: `${isLoaded ? `calc(100vh - ${headerHeight}px)` : "0px"}`,
        }}
      />
    </div>
  );
}

export default DesignerDocumentosPersonalizados;