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

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

export const shapeName = "图片";
export const defaultStyle = {
  strokeWidth: 0,
  stroke: '#000000',
};

export const addMode = 'dot'

export const getMouseStyle = (data: ImageData) => {
  const strokeStatus = getMouseColors(data.stroke || defaultStyle.stroke);

  return {
    default: { stroke: strokeStatus.pub, },
    hover: { stroke: strokeStatus.hover, },
    press: { stroke: strokeStatus.press, },
  };
};


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

export const getSnapPoints = (data: ImageData) => {
  const tf = new Transform(data.mat);
  const useData = data.width && data.height
  if (!useData && !(data.url in imageInfo)) {
    return []
  }
  
  const w = useData ?  data.width : imageInfo[data.url].width
  const h = useData ?  data.height : imageInfo[data.url].height
  const points = getRectSnapPoints(w, h)
  return points.map((v) => tf.point(v))
}

export type ImageData = Partial<typeof defaultStyle> & BaseItem & {
  fill?: string;
  stroke?: string;
  strokeWidth?: number;
  cornerRadius: number
  width: number;
  height: number;
  url: string;
  mat: number[]
};

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

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