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 } from "@/core/hook/use-draw.ts";

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

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

export const addMode = "area";

export const getMouseStyle = (data: TriangleData) => {
  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 type TriangleData = Partial<typeof defaultStyle> &
  BaseItem & { points: Pos[]; attitude: number[]; fill?: string };

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

export const getSnapInfos = (data: TriangleData) =>
  generateSnapInfos(getSnapPoints(data), true, false);

export const interactiveToData = (
  info: AddMessage<"triangle">,
  preset: Partial<TriangleData> = {}
): TriangleData | undefined => {
  if (info.cur) {
    const item = {
      ...getBaseItem(),
      ...preset,
      points: [],
    } as unknown as TriangleData;
    return interactiveFixData(item, info);
  }
};

export const interactiveFixData = (
  data: TriangleData,
  info: AddMessage<"triangle">
) => {
  const area = info.cur!;
 
  data.points[0] = {
    x: area[0].x - (area[1].x - area[0].x),
    y: area[1].y,
  };
  data.points[1] = area[0];
  data.points[2] = area[1];
  return data;
};
