<template>
    <div class="absolute overflow-visible">
        <div v-if="edge.label" :style="{ transform: `${labelPos} translate(-50%, -50%)` }" class="relative bg-light-20 dark:bg-dark-20 border border-light-35 dark:border-dark-35 px-4 py-2 z-20">{{ edge.label }}</div>
        <svg class="absolute top-0 overflow-visible h-px w-px">
            <g :style="{'--canvas-color': edge.color?.hex}" class="z-0">
                <g :style="`transform: translate(${path!.to.x}px, ${path!.to.y}px) scale(var(--zoom-multiplier)) rotate(${rotation[path!.side]}deg);`">
                    <polygon :class="style.fill" points="0,0 6.5,10.4 -6.5,10.4"></polygon>
                </g>
                <path :style="`stroke-width: calc(3px * var(--zoom-multiplier));`" style="stroke-linecap: butt;" :class="style.stroke" class="fill-none stroke-[4px]" :d="path!.path"></path>
            </g>
        </svg>
    </div>
</template>

<script lang="ts">
import type { Direction } from '#shared/canvas.util';
const rotation: Record<Direction, string> = {
    top: "180",
    bottom: "0",
    left: "90",
    right: "270"
};
</script>
<script setup lang="ts">
import { getPath, labelCenter } from '#shared/canvas.util';
import type { CanvasEdge, CanvasNode } from '~/types/canvas';

const { edge, nodes } = defineProps<{
    edge: CanvasEdge
    nodes: CanvasNode[]
}>();

const from = computed(() => nodes!.find(f => f.id === edge.fromNode));
const to = computed(() => nodes!.find(f => f.id === edge.toNode));
const path = computed(() => getPath(from.value!, edge.fromSide, to.value!, edge.toSide));
const labelPos = computed(() => labelCenter(from.value!, edge.fromSide, to.value!, edge.toSide));

const style = computed(() => {
    return edge.color ? edge.color?.class ? 
        { fill: `fill-light-${edge.color?.class} dark:fill-dark-${edge.color?.class}`, stroke: `stroke-light-${edge.color?.class} dark:stroke-dark-${edge.color?.class}` } : 
        { fill: `fill-colored`, stroke: `stroke-[color:var(--canvas-color)]` } : 
        { stroke: `stroke-light-40 dark:stroke-dark-40`, fill: `fill-light-40 dark:fill-dark-40` }
});
</script>