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

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

export const shapeName = "背景图";
export const defaultStyle = {
};

export const addMode = 'dot'

export const getMouseStyle = () => {
  return {
    default: { },
    hover: { },
    press: { },
  };
};


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

export const getSnapPoints = (data: BGImageData) => {
  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 BGImageData = Partial<typeof defaultStyle> & BaseItem & {
  cornerRadius: number
  width: number;
  height: number;
  url: string;
  mat: number[]
};

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

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