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

// Sample dot configurations
const sampleDots: DotConfig[] = [
        { id: 1, value: -1.8, x: -12, imageUrl: 'https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png', title: 'Beginn des neuen Abenteuers', description: '01.10.2024', link: '/page1' },
        { id: 2, value: 1.2, x: -8, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Omas Geburtstag', description: '02.10.2024', link: '/page2' },
        { id: 3, value: -0.6, x: -6, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Konzertbesuch mit Freunden', description: '03.10.2024', link: '/page3' },
        { id: 4, value: 2.7, x: -4, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Wanderung in den Bergen', description: '04.10.2024', link: '/page4' },
        { id: 5, value: 0.8, x: -2, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Ruhiger Tag zu Hause', description: '05.10.2024', link: '/page5' },
        { id: 6, value: -2.9, x: 0, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Unverhoffter Krankentag', description: '06.10.2024', link: '/page6' },
        { id: 7, value: 1.5, x: 2, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Erholungsausflug zum See', description: '07.10.2024', link: '/page7' },
        { id: 8, value: 0, x: 4, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Kleine Wochenendsfeier', description: '08.10.2024', link: '/page8' },
        { id: 9, value: 2.1, x: 6, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Hochzeit von Cousine Tatjana', description: '09.10.2024', link: '/page9' },
        { id: 10, value: -1.8, x: 8, imageUrl: 'https://picsum.photos/200/150?random=1', title: 'Erster Tag im neuen Job', description: '10.10.2024', link: '/page10' },
        { id: 11, value: 1.2, x: 10, imageUrl: 'https://picsum.photos/200/150?random=2', title: 'Klassentreffen nach vielen Jahren', description: '11.10.2024', link: '/page11' },
        { id: 12, value: -0.6, x: 12, imageUrl: 'https://picsum.photos/200/150?random=3', title: 'Familienabendessen', description: '12.10.2024', link: '/page12' },
        { id: 13, value: 2.7, x: 14, imageUrl: 'https://picsum.photos/200/150?random=4', title: 'Kinobesuch mit der ganzen Familie', description: '13.10.2024', link: '/page13' },
        { id: 14, value: 0.8, x: 16, imageUrl: 'https://picsum.photos/200/150?random=5', title: 'Entspannung', description: '14.10.2024', link: '/page14' },
        { id: 15, value: -2.9, x: 18, imageUrl: 'https://picsum.photos/200/150?random=6', title: 'Geruhsamer Sonntag', description: '15.10.2024', link: '/page15' },
        { id: 16, value: 1.5, x: 20, imageUrl: 'https://picsum.photos/200/150?random=7', title: 'Shoppingtag in der Stadt', description: '16.10.2024', link: '/page16' },
        { id: 17, value: 0, x: 22, imageUrl: 'https://picsum.photos/200/150?random=8', title: 'Spaziergang mit der Familie', description: '17.10.2024', link: '/page17' },
        { id: 18, value: 2.1, x: 24, imageUrl: 'https://picsum.photos/200/150?random=9', title: 'Familienfeier bei den Großeltern', description: '18.10.2024', link: '/page18' }
];

// 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);
    });
    */
    
    const scrollContainer = document.querySelector('.scroll-container');

    let isDown = false;
    let startX;
    let scrollLeft;

    scrollContainer.addEventListener('mousedown', (e) => {
    isDown = true;
    scrollContainer.classList.add('active');
    startX = e.pageX - scrollContainer.offsetLeft;
    scrollLeft = scrollContainer.scrollLeft;
    });

    scrollContainer.addEventListener('mouseleave', () => {
    isDown = false;
    scrollContainer.classList.remove('active');
    });

    scrollContainer.addEventListener('mouseup', () => {
    isDown = false;
    scrollContainer.classList.remove('active');
    });

    scrollContainer.addEventListener('mousemove', (e) => {
    if(!isDown) return;
    e.preventDefault();
    const x = e.pageX - scrollContainer.offsetLeft;
    const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling
    scrollContainer.scrollLeft = scrollLeft - walk;
    });

});
