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

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

export const shapeName = "文字";
export const defaultStyle = {
  // stroke: themeMouseColors.theme,
  fill: themeMouseColors.theme,
  // strokeWidth: 0,
  fontFamily: 'Calibri',
  fontSize: 16,
  align: 'center',
  fontStyle: "normal"
};

export const addMode = 'dot'

export type TextData = Partial<typeof defaultStyle> & BaseItem & {
  mat: number[]
  content: string
  width?: number
};


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

  return {
    default: { fill: fillStatus.pub },
    hover: { fill: fillStatus.hover },
    press: { fill: fillStatus.press },
  };
};

export const textNodeMap: Record<BaseItem['id'], Text> = shallowReactive({})


export const getSnapPoints = (data: TextData) => {
  if (!textNodeMap[data.id]) return []
  const node = textNodeMap[data.id]
  const tf = new Transform(data.mat)
  return getRectSnapPoints(data.width || node.width(), node.height(), 0, 0).map((v) => tf.point(v));
}

export const getSnapInfos = (data: TextData) => {
  return generateSnapInfos(getSnapPoints(data), true, false);
};

export const interactiveToData = (
  info: AddMessage<'text'>,
  preset: Partial<TextData> = {}
): TextData | undefined => {
  if (info.cur) {
    const item = {
      ...defaultStyle,
      ...getBaseItem(),
      ...preset,
      content: preset.content || '文字',
    } as unknown as TextData;
    return interactiveFixData(item, info);
  }
};

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