import { Pos } from "@/utils/math.ts";
import { BaseItem, generateSnapInfos, getBaseItem } from "../util.ts";
import { getMouseColors } from "@/utils/colors.ts";
import { InteractiveFix, InteractiveTo, MatResponseProps } from "../index.ts";
import { Transform } from "konva/lib/Util";

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

export const shapeName = "三角形";
export const defaultStyle = {
  stroke: '#000000',
  strokeWidth: 5,
  fontSize: 22,
  fixed: true,
  align: "center",
  fontStyle: "normal",
  fontColor: '#000000',
};

export const addMode = "area";
export const fixedStrokeOptions = [1, 2, 4];

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

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

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

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

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

export const interactiveToData: InteractiveTo<"triangle"> = ({
  info,
  preset = {},
  ...args
}) => {
  if (info.cur) {
    const item = {
      ...getBaseItem(),
      ...defaultStyle,
      fill: null,
      ...preset,
      points: [],
    } as unknown as TriangleData;
    return interactiveFixData({ ...args, info, data: item });
  }
};

export const interactiveFixData: InteractiveFix<"triangle"> = ({
  data,
  info,
}) => {
  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;
};


export const matResponse = ({data, mat, increment}: MatResponseProps<'triangle'>) => {
  let transfrom: Transform
  const attitude = new Transform(data.attitude);
  if (!increment) {
    const inverMat = attitude.copy().invert();
    transfrom = mat.copy().multiply(inverMat);
  } else {
    transfrom = mat
  }

  data.points = data.points.map((v) => transfrom.point(v));
  data.attitude = transfrom.copy().multiply(attitude).m;
  return data;
}
export const getPredefine = (key: keyof TriangleData) => {

  if (["fill", "stroke"].includes(key)) {
    return { canun: true };
  } 
};