<script setup lang="ts">
interface Props
{
    path: {
        path: string;
        to: { x: number; y: number };
        side: 'bottom' | 'top' | 'left' | 'right';
    };
    color?: string;
}
const props = defineProps<Props>();

const rotation = {
    top: "180",
    bottom: "0",
    left: "90",
    right: "270"
};

function hexToRgb(hex: string): string {
    return `${parseInt(hex.substring(1, 3), 16)}, ${parseInt(hex.substring(3, 5), 16)}, ${parseInt(hex.substring(5, 7), 16)}`;
}

const classes: any = { 'is-themed': props.color !== undefined, 'mod-canvas-color-custom': (props?.color?.startsWith('#') ?? false) };

if (props.color !== undefined) {
    if (!props.color.startsWith('#'))
        classes['mod-canvas-color-' + props.color] = true;
}
</script>

<template>
        <g :class="classes" :style="{ '--canvas-color': props?.color?.startsWith('#') ? hexToRgb(props.color) : undefined }"><path class="canvas-display-path" :d="props.path.path"></path></g>
        <g :class="classes" :style="{ '--canvas-color': props?.color?.startsWith('#') ? hexToRgb(props.color) : undefined, transform: `translate(${props.path.to.x}px, ${props.path.to.y}px) rotate(${rotation[props.path.side]}deg)` }"><polygon class="canvas-path-end" points="0,0 6.5,10.4 -6.5,10.4"></polygon></g>
</template>