import { ConnectedDotsVisualization, type DotConfig } from './ConnectedDotsVisualization';

// Sample dot configurations
const sampleDots: DotConfig[] = [
    { 
        id: 1, 
        value: -1.8, 
        x: -6,
        imageUrl: 'https://picsum.photos/200/150?random=1',
        title: 'First Point',
        description: 'This is the starting point of our journey.',
        link: '/page1'
    },
    { 
        id: 2, 
        value: 1.2, 
        x: -4,
        imageUrl: 'https://picsum.photos/200/150?random=2',
        title: 'Rising Up',
        description: 'We begin to see an upward trend here.'
    },
    { 
        id: 3, 
        value: -0.6, 
        x: -2,
        imageUrl: 'https://picsum.photos/200/150?random=3',
        title: 'Minor Dip',
        description: 'A small setback before the major growth.',
        link: '/page3'
    },
    { 
        id: 4, 
        value: 2.7, 
        x: 0,
        imageUrl: 'https://picsum.photos/200/150?random=4',
        title: 'Peak Performance',
        description: 'This is our highest point so far!',
        link: '/page4'
    },
    { 
        id: 5, 
        value: 0.8, 
        x: 2,
        imageUrl: 'https://picsum.photos/200/150?random=5',
        title: 'Normalization',
        description: 'Returning to more sustainable levels.'
    },
    { 
        id: 6, 
        value: -2.9, 
        x: 4,
        imageUrl: 'https://picsum.photos/200/150?random=6',
        title: 'Major Decline',
        description: 'A significant drop in our metrics.',
        link: '/page6'
    },
    { 
        id: 7, 
        value: 1.5, 
        x: 6,
        imageUrl: 'https://picsum.photos/200/150?random=7',
        title: 'Recovery',
        description: 'Bouncing back strongly from the previous low.'
    },
    { 
        id: 8, 
        value: -0.5, 
        x: 8,
        imageUrl: 'https://picsum.photos/200/150?random=8',
        title: 'Slight Dip',
        description: 'A minor correction in our upward trend.',
        link: '/page8'
    },
    { 
        id: 9, 
        value: 2.1, 
        x: 10,
        imageUrl: 'https://picsum.photos/200/150?random=9',
        title: 'Second Peak',
        description: 'Another high point in our journey.'
    }
];

// Wait for DOM to be fully loaded
document.addEventListener('DOMContentLoaded', () => {
    // Initialize the visualization with the sample dots
    const visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, {
        // Optional custom configuration
        dotRadius: 8,
        tooltipWidth: 200,
        tooltipHeight: 150
    });
    
    // Handle window resize
    window.addEventListener('resize', () => {
        visualization.resize();
    });
    
    // Example of updating dots dynamically (if needed)
    /* 
    const updateButton = document.createElement('button');
    updateButton.textContent = 'Update Data';
    updateButton.classList.add('button');
    updateButton.style.marginTop = '10px';
    document.body.appendChild(updateButton);
    
    updateButton.addEventListener('click', () => {
        // Generate some new random data with image tooltips
        const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({
            id: i + 1,
            value: Math.random() * 6 - 3, // Random value between -3 and 3
            x: i - 3,
            imageUrl: `https://picsum.photos/200/150?random=${i+10}`,
            title: `Point ${i+1}`,
            description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}`
        }));
        visualization.updateDots(newDots);
    });
    */
});
