<script setup>
import { useProjectStore } from '../stores/projectStore';
import { computed } from 'vue';

const props = defineProps({
  zoom: Number, // Pass zoom from Artboard.vue
});

const projectStore = useProjectStore();

const gridStyle = computed(() => {
    if (!projectStore.activePage) return {};

    const artboardWidth = projectStore.activePage.width;
    const artboardHeight = projectStore.activePage.height;
    const gridSize = projectStore.gridSize; // This is in pixels

    // Calculate the grid size in percentage relative to the artboard's current dimensions
    const gridPercentX = (gridSize / artboardWidth) * 100;
    const gridPercentY = (gridSize / artboardHeight) * 100;

    // Apply zoom to the visual grid, so it looks consistent regardless of zoom level
    const visualGridSizeX = `${gridPercentX * props.zoom}%`;
    const visualGridSizeY = `${gridPercentY * props.zoom}%`;

    const color = 'rgba(128, 128, 128, 0.2)';
    return {
        backgroundSize: `${visualGridSizeX} ${visualGridSizeY}`,
        backgroundImage: `
            linear-gradient(to right, ${color} 1px, transparent 1px),
            linear-gradient(to bottom, ${color} 1px, transparent 1px)
        `,
    };
});
</script>

<template>
    <div class="grid-overlay" :style="gridStyle"></div>
</template>

<style scoped>
.grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Make sure it doesn't interfere with mouse events */
    z-index: 1; /* Should be behind components */
}
</style>
