import { themeColor } from "@/constant/help-style";
import { DrawItem, ShapeType, shapeNames } from "@/index.ts";
import { v4 as uuid } from "uuid";
import { toRaw } from "vue";

type PresetAdd<T extends ShapeType = ShapeType> ={
  type: T;
  preset?: Partial<DrawItem<T>>;
}

export type MenuItem<T extends ShapeType = ShapeType> = {
  icon: string;
  name: string;
  value?: string;
  children?: MenuItem<T>[];
  payload?: PresetAdd<T>
};

const genItem = <T extends ShapeType>(
  type: T,
  preset: PresetAdd<T>["preset"] = {}
) => ({
  name: shapeNames[type],
  value: uuid(),
  payload: { type, preset },
});

export const getItem = (
  value: string,
  queryMenus = menus
): MenuItem | undefined => {
  for (const menu of queryMenus) {
    const eqItem =
      menu.value === value
        ? menu
        : menu.children?.length
        ? getItem(value, menu.children)
        : void 0;
    if (eqItem) return eqItem;
  }
};

const eqPayload = (p1?: PresetAdd, p2?: PresetAdd) => {
  if (!p2 || !p1 || p1.type !== p2.type) return false;
  return !p1.preset || !p2.preset || toRaw(p1.preset) === toRaw(p2.preset);
};

export const getValue = (
  payload: PresetAdd,
  queryMenus = menus
): string | undefined => {
  for (const menu of queryMenus) {
    const eqItem = eqPayload(menu.payload, payload)
      ? menu.value
      : menu.children?.length
      ? getValue(payload, menu.children)
      : void 0;
    if (eqItem) return eqItem;
  }
};

export const menus: MenuItem[] = [
  {
    icon: "",
    name: "绘制",
    value: uuid(),
    children: [
      {
        icon: "",
        ...genItem("line"),
      },
      {
        icon: "",
        ...genItem("arrow"),
      },

      {
        icon: "",
        ...genItem("rectangle"),
      },
      {
        icon: "",
        ...genItem("circle"),
      },
      {
        icon: "",
        ...genItem("triangle"),
      },
      {
        icon: "",
        ...genItem("polygon"),
      },
    ],
  },
  {
    icon: "",
    name: "图例",
    value: uuid(),
    children: [
      {
        icon: "",
        ...genItem("icon", { url: '/icons/BedsideCupboard.svg', width: 100, height: 100, fill: themeColor }),
        name: "vue",
      },
      {
        icon: "",
        ...genItem("icon", {
          url: '/icons/vue.svg',
          width: 100,
          height: 100,
          stroke: "red",
          strokeWidth: 1,
          strokeScaleEnabled: false,
        }),
        name: "自定义",
      },
    ],
  },
  {
    icon: "",
    ...genItem("text"),
  },
];
