import { Pos } from "@/utils/math.ts";
import { themeMouseColors } from "@/constant/help-style.ts";
import { BaseItem, generateSnapInfos, getBaseItem } from "../util.ts";
import { getMouseColors } from "@/utils/colors.ts";
import { AddMessage, MessageAction } from "@/core/hook/use-draw.ts";

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

export const shapeName = "多边形";
export const defaultStyle = {
  stroke: themeMouseColors.theme,
  strokeWidth: 5,
};

export const getMouseStyle = (data: PolygonData) => {
  const fillStatus = data.fill && getMouseColors(data.fill);
  const strokeStatus = getMouseColors(data.stroke || defaultStyle.stroke);
  const strokeWidth = data.strokeWidth ;

  return {
    default: { fill: fillStatus && fillStatus.pub, stroke: strokeStatus.pub, strokeWidth },
    hover: { fill: fillStatus && fillStatus.hover, stroke: strokeStatus.hover },
    press: { fill: fillStatus && fillStatus.press, stroke: strokeStatus.press },
  };
};

export const addMode = "dots";

export const getSnapInfos = (data: PolygonData) => generateSnapInfos(getSnapPoints(data), true, true)


export const getSnapPoints = (data: PolygonData) => {
  return data.points
}

export type PolygonData = Partial<typeof defaultStyle> & BaseItem & {
  fill?: string
  points: Pos[];
  attitude: number[];
};

export const interactiveToData = (
  info: AddMessage<'polygon'>,
  preset: Partial<PolygonData> = {}
): PolygonData | undefined => {
  if (info.cur) {
    return interactiveFixData(
      { ...getBaseItem(), ...preset, points: [], attitude: [1, 0, 0, 1, 0, 0] },
      info
    );
  }
};

export const interactiveFixData = (
  data: PolygonData,
  info: AddMessage<'polygon'>
) => {
  data.points = [...info.consumed, info.cur!]
  return data;
};
