<template>
  <TempArrow :data="tData" :ref="(v: any) => shape = v?.shape" :id="data.id" />
  <PropertyUpdate
    :describes="describes"
    :data="data"
    :target="shape"
    @change="emit('updateShape', { ...data })"
  />
  <Operate :target="shape" :menus="operateMenus" />
</template>

<script lang="ts" setup>
import { Arrow } from "konva/lib/shapes/Arrow";
import { PropertyUpdate, Operate } from "../../propertys";
import { ArrowData, getMouseStyle, defaultStyle } from "./index.ts";
import TempArrow from "./temp-arrow.vue";
import { useComponentStatus } from "@/core/hook/use-component.ts";
import { Line } from "konva/lib/shapes/Line";
import { Transform } from "konva/lib/Util";

const props = defineProps<{ data: ArrowData }>();
const emit = defineEmits<{
  (e: "updateShape", value: ArrowData): void;
  (e: "addShape", value: ArrowData): void;
  (e: "delShape"): void;
}>();

const { shape, tData, operateMenus, describes, data } = useComponentStatus<
  Arrow,
  ArrowData
>({
  emit,
  props,
  getMouseStyle,
  defaultStyle,
  alignment(data, mat) {
    data.points = data.points.map((p) => mat.point(p));
    data.attitude = mat.multiply(new Transform(data.attitude)).m;
  },
  transformType: "line",
  getRepShape(): Line {
    return new Line({
      fill: "rgb(0, 255, 0)",
      visible: false,
      strokeWidth: 0,
      points: shape.value!.getNode().points(),
    });
  },
  copyHandler(tf, data) {
    data.points = data.points.map((v) => tf.point(v));
    return data;
  },
  propertys: [
    "fill",
    "pointerPosition",
    "strokeWidth",
    "pointerLength",
    "dash",
    // "ref",
    "opacity",
    // "zIndex",
  ],
});
</script>
