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";
  },
  pxToDesignSize(value: number) {
    return value * 2;
  },
  findComp(compId: string) {
    const { compMap } = this.store.designData;
    const comp = compMap[compId];
    if (comp) return comp;
  },
  isStreamCard(compId: string) {
    return this.store.streamCardIds.indexOf(compId) > -1;
  },
  isGroupComp(compId: string) {
    return this.store.groupIds.indexOf(compId) > -1;
  },
  isGroupCompChild(compId: string) {
    const comps = this.helper.getCompTrees(compId);
    comps.pop();
    while (comps.length) {
      const comp = comps.pop() as DesignComp;
      if (comp.compKey === "Group") {
        return true;
      }
    }
    return false;
  },
  findParentComp(compId: string): DesignComp | undefined {
    const comp = this.helper.findComp(compId);
    if (comp) return this.helper.findComp(this.store.compPids[compId]);
  },
  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(this.store.compPids[comp.id]);
      }
    };
    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 (comp.compKey == "Container" && this.store.streamCardIds.length == 1)
      return false;
    return true;
    // if (this.store.isEditComp) return true;
    // return this.store.pageCompIds.includes(compId);
  },
  isShowSaveComp(comp: DesignComp): boolean {
    // if (!comp.children?.default || comp.children?.default?.length == 0)
    //   return false;
    if (!this.helper.isCustomChildComp(comp)) return false;
    return true;
  },

  clearUnusedComps(compMap: Record<string, DesignComp>, rootId = "root") {
    const used = new Set<string>();
    const getUsedIds = (ids: string[]) => {
      ids.forEach((id) => {
        const comp = compMap[id];
        if (!comp) return;
        used.add(id);
        getUsedIds(comp.getChildIds());
      });
      return used;
    };
    getUsedIds([rootId]);
    Object.keys(compMap).forEach((compId) => {
      if (!used.has(compId)) {
        delete compMap[compId];
      }
    });
  },
  async screenshot(options: {
    element: HTMLElement;
    ratio?: number;
  }): Promise<Blob> {
    const dom = options.element;

    const transferEl = document.querySelector(".transfer") as
      | HTMLElement
      | undefined;
    if (transferEl) {
      transferEl.style.display = "none";
    }

    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 () {
          if (transferEl) {
            transferEl.style.display = "block";
          }
          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 (transferEl) {
            transferEl.style.display = "block";
          }
          if (blob) {
            resolve(blob);
          }
        });
      });
    } else {
      return domtoimage.toBlob(dom);
    }
  },
});