<script setup lang="ts">
import type { CanvasColor } from "~/types/canvas";

type Direction = 'bottom' | 'top' | 'left' | 'right';
interface Props
{
    path: {
        path: string;
        from: { x: number; y: number };
        to: { x: number; y: number };
        side: Direction;
    };
    color?: CanvasColor;
    label?: string;
}
const props = defineProps<Props>();

const rotation: Record<Direction, string> = {
    top: "180",
    bottom: "0",
    left: "90",
    right: "270"
};
</script>

<template>
    <g :style="{'--canvas-color': color?.hex}" class="z-0">
        <path :style="`stroke-linecap: butt; stroke-width: calc(3px * var(--zoom-multiplier));`" :class="color?.class ? `stroke-light-${color.class} dark:stroke-dark-${color.class}` : ((color && color?.hex !== undefined) ? 'stroke-[color:var(--canvas-color)]' : 'stroke-light-40 dark:stroke-dark-40')" class="fill-none stroke-[4px]" :d="path.path"></path>
        <g :style="`transform: translate(${path.to.x}px, ${path.to.y}px) scale(var(--zoom-multiplier)) rotate(${rotation[path.side]}deg);`">
            <polygon :class="color?.class ? `fill-light-${color.class} dark:fill-dark-${color.class}` : ((color && color?.hex !== undefined) ? 'fill-[color:var(--canvas-color)]' : 'fill-light-40 dark:fill-dark-40')" points="0,0 6.5,10.4 -6.5,10.4"></polygon>
        </g>
    </g>
</template>