import {
  getFontsData,
  getLabelsBR,
  getPlugins,
  getTemplate,
  repeatedNameFields,
} from "@/utils/pdfme/helper";
import { Template, checkTemplate } from "@pdfme/common";
import { Designer } from "@pdfme/ui";
import { useEffect, useRef, useState } from "react";
import { GrDocumentVerified } from "react-icons/gr";
import * as yup from "yup";

import Button from "@/components/Forms/Button";
import InputSelectComponent from "@/components/Forms/InputSelect";
import ModalReact from "@/components/Modal/ModalReact";
import LoaderSun from "@/components/common/Loader/LoaderSun";
import { obterTemplateContrato } from "@/requests/CRM/Contrato/obterTemplateContrato";
import { duplicarTemplates } from "@/requests/CRUD/Lojas/editarLojas";
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 DesignerContrato({ defaultValues, onSubmitFunction, loja }: any) {
  const [isFullscreen, setIsFullscreen] = useState(false);
  const otherRef = useRef<HTMLDivElement | null>(null);
  const designerRef = useRef<HTMLDivElement | null>(null);
  const designer = useRef<Designer | null>(null);
  const [yupDeleteSchema, setYupDeleteSchema] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));
  const {
    camposRelacionamentosContratos,
    camposPersonalizadosRelacionamentosContratos,
  } = useContractContext();

  const [isLoaded, setIsLoaded] = useState(false);
  const [showModalDuplicate, setShowModalDuplicate] = useState(false);
  const [lojasSelecionads, setLojasSelecionads] = useState<any>([]);

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

  async function loadTemplate() {
    // let template: Template = getTemplate();
    let template: any = getTemplate();
    // const response = defaultValues;
    // response["id_loja"] = loja;

    const templateString: string | false = await obterTemplateContrato(
      defaultValues
    ).then((templateData) =>
      baixarAwsContent(templateData[defaultValues.coluna]).then(
        (template) => template
      )
    );

    try {
      let templateJson = templateString
        ? JSON.parse(templateString)
        : getTemplate();
      checkTemplate(templateJson);
      template = templateJson as any;
    } catch (error) {
      console.error(
        "Invalid template string received from backend:",
        templateString
      );
      template = getTemplate() as Template; // Fallback to default template
    }
    template["basePdf"] = template["basePdf"]!;

    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",
              },
            },
          },
          plugins: getPlugins(),
        });
        designer.current.onSaveTemplate(onSaveTemplate);
        setIsLoaded(true);
      }
    });
  }

  const onSaveTemplate = (template?: Template) => {
    if (designer.current) {
      if (!repeatedNameFields(designer)) {
        const obj = {
          id_tipo_negocio: defaultValues.id_tipo_negocio,
          templateContrato_tipo_negocio: JSON.stringify(
            template || designer.current.getTemplate(),
            null,
            2
          ),
        };

        onSubmitFunction(obj);
      }
    }
  };

  async function duplicarFunction() {
    // const data = {
    //   id_tipo_negocio: defaultValues.id_tipo_negocio,
    //   id_lojas: lojasSelecionads,
    //   templateContrato_loja: defaultValues.templateContrato_tipo_negocio,
    // };
    // duplicarTemplates(data);
    if (designer.current) {
      if (!repeatedNameFields(designer)) {
        const obj = {
          lojas: lojasSelecionads,
          id_tipo_negocio: defaultValues.id_tipo_negocio,
          [defaultValues?.coluna?.slice(8)]: JSON.stringify(
            designer.current.getTemplate(),
            null,
            2
          ),
        };

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

          <MenuPdfme
            designer={designer}
            relacionamentos={camposRelacionamentosContratos}
            camposPersonalizadosRelacionamentos={
              camposPersonalizadosRelacionamentosContratos
            }
            onSaveTemplate={onSaveTemplate}
            titulo="Contrato Exemplo"
          >
            {loja && (
              <>
                <button
                  className="flex flex-row flex-nowrap items-center bg-success rounded px-2 py-1 text-white"
                  onClick={() => setShowModalDuplicate(true)}
                >
                  <div className="pr-2">
                    <GrDocumentVerified />
                  </div>
                  Duplicar Template
                </button>
              </>
            )}
            <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>
            <ModalReact
              open={showModalDuplicate}
              title="Duplicar Template"
              onClose={() => setShowModalDuplicate(false)}
            >
              <div className="p-5">
                <InputSelectComponent
                  name="loja"
                  label="Lojas"
                  isMulti
                  options={loja}
                  onChange={(e: any) =>
                    setLojasSelecionads(e.map((item: any) => item.value))
                  }
                />
              </div>
              <div className="flex justify-center items-center p-5">
                <Button type="button" onClick={() => duplicarFunction()}>
                  Confirmar
                </Button>
              </div>
            </ModalReact>
          </MenuPdfme>
        </header>
      )}
      <div
        ref={designerRef}
        id="contratoId"
        style={{
          width: "100%",
          height: `${isLoaded ? `calc(100vh - ${headerHeight}px)` : "0px"}`,
        }}
      />
    </div>
  );
}

export default DesignerContrato;