import domtoimage from "dom-to-image";
import { EditorModule } from "..";
import { DesignComp } from "../../objects/DesignTemp/DesignComp";
import { createCompStyle } from "../../objects/DesignTemp/creates/createCompStyle";
import { Layout } from "../../typings";

export const helpers = EditorModule.helper({
  designToNaturalSize(value: number) {
    return parseFloat((value / 100).toFixed(2)) + "rem";
  },
  findComp(compId: string) {
    const { compMap } = this.store.designData;
    const comp = compMap[compId];
    if (comp) return comp;
  },
  findParentComp(compId: string): DesignComp | undefined {
    const comp = this.helper.findComp(compId);
    if (comp) return this.helper.findComp(comp.pid);
  },
  findRootComp(): DesignComp | undefined {
    return this.store.designData.compMap["root"];
  },
  getCompTrees(compId: string) {
    const comps: DesignComp[] = [];
    const getParentComp = (compId: string) => {
      const comp = this.helper.findComp(compId);
      if (comp) {
        comps.unshift(comp);
        getParentComp(comp.pid);
      }
    };
    getParentComp(compId);
    return comps;
  },
  createStyle(layout: Partial<Layout>) {
    return createCompStyle(this, layout);
  },
  isCurrComp(compId: string) {
    return this.store.currCompId === compId;
  },
  isCustomChildComp(comp: DesignComp): boolean {
    const parentComp = this.helper.findParentComp(comp.id);
    if (!parentComp) return false;
    const i =
      parentComp.children.default?.findIndex((d) => d === comp.id) ?? -1;
    return i >= 0;
  },
  isCompCanDelete(compId: string): boolean {
    const comp = this.helper.findComp(compId);
    if (!comp || !this.helper.isCustomChildComp(comp)) return false;
    if (this.store.isEditComp) return true;
    return this.store.pageCompIds.includes(compId);
  },
  async screenshot(options?: { ratio: number }): Promise<Blob> {
    const dom = document.querySelector(".page-editing-content")
      ?.parentElement as HTMLElement;
    if (options?.ratio) {
      const result = await domtoimage.toJpeg(dom);
      const img = await new Promise<HTMLImageElement>((resolve) => {
        const image = new Image();
        image.src = result;
        image.onload = function () {
          resolve(image);
        };
      });
      const canvas = document.createElement("canvas");
      canvas.width = img.naturalWidth;
      canvas.height = Math.min(
        img.naturalWidth / options.ratio,
        img.naturalHeight
      );
      const ctx = canvas.getContext("2d");
      ctx?.drawImage(
        img,
        0,
        0,
        canvas.width,
        canvas.height,
        0,
        0,
        canvas.width,
        canvas.height
      );
      return new Promise((resolve) => {
        canvas.toBlob((blob) => {
          if (blob) {
            resolve(blob);
          }
        });
      });
    } else {
      return domtoimage.toBlob(dom);
    }
  },
});