<template>
</template>

<script>
export default {
    data() {
        return {
            // Define color steps (100, 200, ..., 900, 950)
            colorSteps: [100, 200, 300, 400, 500, 600, 700, 800, 900, 950],
            // Store computed colors
            computedColors: {},
            requestedColorNames: [
                '--color-surface-0',
                '--color-surface-1',
                '--color-surface-2',
                '--color-text',
                '--color-accent',
                '--color-accent-hover',
                '--color-border',
                '--color-rosewater',
                '--color-flamingo',
                '--color-pink',
                '--color-mauve',
                '--color-red',
                '--color-maroon',
                '--color-peach',
                '--color-yellow',
                '--color-teal',
                '--color-sky',
                '--color-sapphire',
                '--color-blue',
                '--color-lavender',
                '--color-overlay-0',
                '--color-overlay-1',
                '--color-overlay-2'
            ]
        };
    },
    mounted() {
        this.computeColors();
    },
    methods: {
        // Method to fetch the CSS variable and convert it to HSL, then adjust lightness
        rgbToHsl(r, g, b) {
            r /= 255;
            g /= 255;
            b /= 255;

            let max = Math.max(r, g, b);
            let min = Math.min(r, g, b);
            let h = 0, s = 0, l = (max + min) / 2;

            if (max !== min) {
                let d = max - min;
                s = (l > 0.5) ? d / (2 - max - min) : d / (max + min);

                switch (max) {
                    case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                    case g: h = (b - r) / d + 2; break;
                    case b: h = (r - g) / d + 4; break;
                }

                h /= 6;
            }

            return [h * 360, s * 100, l * 100]; // Return in degrees for hue and percentages for saturation and lightness
        },

        // Method to compute the color adjustments (lightness + hue)
        computeColors() {
            // Loop through each requested color
            this.requestedColorNames.forEach((name) => {
                this.colorSteps.forEach((step) => {
                    // Fetch the RGB color from the root CSS variable
                    const color = getComputedStyle(document.documentElement).getPropertyValue(name).trim();

                    if (!color) {
                        console.log(`Color ${name} not found`);
                        return;
                    }

                    // Extract RGB values from the color string (either #rrggbb or rgb(r, g, b))
                    let r, g, b;
                    if (color.startsWith('rgb')) {
                        [r, g, b] = color.match(/\d+/g).map(Number);
                    } else if (color.startsWith('#')) {
                        r = parseInt(color.slice(1, 3), 16);
                        g = parseInt(color.slice(3, 5), 16);
                        b = parseInt(color.slice(5, 7), 16);
                    }

                    // Convert the RGB values to HSL
                    const [hue, saturation, lightness] = this.rgbToHsl(r, g, b);

                    // Adjust the lightness based on the step (100-900 + 950)
                    const adjustedLightness = 100 - (step / 10);

                    // Update the computed color for the current step
                    this.computedColors[step] = `hsl(${hue}, ${saturation}%, ${adjustedLightness}%)`;

                    // Dynamically update the CSS variable for this color
                    document.documentElement.style.setProperty(`${name}-${step}`, this.computedColors[step]);
                });
            });
        }
    }
};
</script>