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

interface Props {
    node: CanvasNode;
    zoom: number;
}

function getColor(color: string): string
{
    if(props.node?.color?.startsWith('#'))
        return hexToRgb(color);
    else
        return getComputedStyle(document.body, null).getPropertyValue('--canvas-color-' + props.node.color);
}
function hexToRgb(hex: string): string
{
    return `${parseInt(hex.substring(1, 3), 16)},${parseInt(hex.substring(3, 5), 16)},${parseInt(hex.substring(5, 7), 16)}`;
}
function darken(rgb: string): boolean
{
    const [r, g, b] = rgb.split(',');
    return (299 * parseInt(r) + 587 * parseInt(g) + 114 * parseInt(b)) / 1e3 >= 150;
}

const props = defineProps<Props>();

const size = Math.max(props.node.width, props.node.height);
</script>

<template>
    <div class="absolute" :style="{transform: `translate(${node.x}px, ${node.y}px)`, width: `${node.width}px`, height: `${node.height}px`}">
        <div :class="{'z-0': node.type === 'group', 'z-[2]': node.type !== 'group'}" class="border-2 border-light-40 dark:border-dark-40 bg-light-20 dark:bg-dark-20 overflow-hidden contain-strict w-full h-full py-2 px-4 flex">
            <template v-if="node.type === 'group' || zoom > Math.min(0.38, 1000 / size)">
                <div v-if="node.text?.length > 0" class="flex items-center">
                    <Markdown v-model="node.text" />
                </div>
            </template>
            <template v-else>
                <div class="flex flex-1 justify-center items-center bg-light-30 dark:bg-dark-30">
                    <div class="">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="svg-icon lucide-align-left">
                            <line x1="21" y1="6" x2="3" y2="6"></line>
                            <line x1="15" y1="12" x2="3" y2="12"></line>
                            <line x1="17" y1="18" x2="3" y2="18"></line>
                        </svg>
                    </div>
                </div>
            </template>
        </div>
        <div v-if="node.type === 'group' && node.label !== undefined" style="max-width: 100%; font-size: calc(16px * var(--zoom-multiplier))" class="origin-bottom-left tracking-wider truncate inline-block bg-light-40 dark:bg-dark-40 text-light-100 dark:text-dark-100 absolute bottom-[100%] mb-2 px-2 py-1 font-thin">{{ node.label }}</div>
    </div>
</template>