import { themeMouseColors } from "@/constant/help-style.ts";
import { Transform } from "konva/lib/Util";
import { BaseItem, generateSnapInfos, getBaseItem, getRectSnapPoints } from "../util.ts";
import { getMouseColors } from "@/utils/colors.ts";
import { AddMessage } from "@/core/hook/use-draw.ts";

export { default as Component } from "./icon.vue";
export { default as TempComponent } from "./temp-icon.vue";

export const shapeName = "图例";
export const defaultStyle = {
  coverFill: themeMouseColors.theme,
  coverOpcatiy: 0,
  strokeScaleEnabled: false,
  width: 80,
  height: 80,
};

export const addMode = "dot";

export const getSnapInfos = (data: IconData) => {
  const tf = new Transform(data.mat);
  const w = data.width || defaultStyle.width;
  const h = data.height || defaultStyle.height;
  const points = getRectSnapPoints(w, h)
  return generateSnapInfos(
    points.map((v) => tf.point(v)),
    true,
    false
  );
};

export const getMouseStyle = (data: IconData) => {
  const fillStatus = getMouseColors(data.coverFill || defaultStyle.coverFill);
  const hCoverOpcaoty = data.coverOpcatiy ? data.coverOpcatiy : 0.3

  return {
    default: { coverFill: fillStatus.pub, coverOpcatiy: data.coverOpcatiy ||0 },
    hover: { coverFill: fillStatus.hover, coverOpcatiy: hCoverOpcaoty },
    press: { coverFill: fillStatus.press, coverOpcatiy: hCoverOpcaoty },
  };
};

export type IconData = Partial<typeof defaultStyle> &
  BaseItem & {
    fill?: string,
    stroke?: string,
    strokeWidth?: number,
    coverFill?: string;
    coverStroke?: string;
    coverStrokeWidth?: number;
    width: number;
    height: number;
    mat: number[];
    url: string;
  };


export const dataToConfig = (data: IconData) => {
  return {
    ...defaultStyle,
    ...data,
  };
};

export const interactiveToData = (
  info: AddMessage<'icon'>,
  preset: Partial<IconData> = {}
): IconData | undefined => {
  if (info.cur) {
    return interactiveFixData(
      { ...getBaseItem(), ...preset } as unknown as IconData,
      info
    );
  }
};

export const interactiveFixData = (
  data: IconData,
  info: AddMessage<'icon'>
) => {
  const mat = new Transform().translate(info.cur!.x, info.cur!.y);
  data.mat = mat.m;
  return data;
};