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

import '../src/style.css';

/*
 * If you are using a bundler like Vite, Webpack, or similar, you need to ensure that the `src/images` folder is included in your build output.
 * 
 * For Vite:
 * - Place your images in the `public/images` directory instead of `src/images`.
 * - Reference them as `/images/filename.png` in your code.
 * 
 * For Webpack:
 * - Use `require` or `import` for images, or configure `copy-webpack-plugin` to copy the `src/images` folder to your output directory.
 * 
 * For static hosting (e.g., GitHub Pages, Netlify):
 * - Make sure the images are in the output directory (e.g., `dist/images`) after build.
 * 
 * Example for Vite:
 *   Move images to `public/images` and update imageUrl paths to `/images/filename.png`.
 */

// Sample dot configurations
const sampleDots: DotConfig[] = [
    {
        id: 1,
        value: -1.8,
        x: -2,
        imageUrl:
        "/images/0_3.png",
        title: "Beginn des neuen Abenteuers",
        description: "01.10.2024",
        link: "/page1",
    },
    {
        id: 2,
        value: 1.2,
        x: 0,
        imageUrl:
        "/images/0_2.png",
        title: "Omas Annis Geburtstag",
        description: "02.10.2024",
        link: "/page2",
    },
    {
        id: 3,
        value: -0.6,
        x: 2,
        imageUrl:
        "/images/disco.png",
        title: "Konzertbesuch mit Freunden",
        description: "03.10.2024",
        link: "/page3",
    },
    {
        id: 4,
        value:3,
        x: 4,
        imageUrl:
        "/images/pferd.png",
        title: "Wanderreiten in den Bergen",
        description: "04.10.2024",
        link: "/page4",
    },
    {
        id: 5,
        value: 1,
        x: 6,
        imageUrl:
        "/images/gpt.png",
        title: "Ruhiger Tag zu Hause",
        description: "05.10.2024",
        link: "/page5",
    },
    {
        id: 6,
        value: -3,
        x: 8,
        imageUrl:
        "/images/oma.png",
        title: "Oma Erna verstorben",
        description: "06.10.2024",
        link: "/page6",
    },
    {
        id: 7,
        value: 1.5,
        x: 10,
        imageUrl:
        "/images/see.png",
        title: "Erholungsausflug zum See",
        description: "07.10.2024",
        link: "/page7",
    },
    {
        id: 8,
        value: 0,
        x: 12,
        imageUrl:
        "/images/feier.png",
        title: "Kleine Wochenendsfeier",
        description: "08.10.2024",
        link: "/page8",
    },
    {
        id: 9,
        value: 3,
        x: 14,
        imageUrl:
        "/images/hochzeit.png",
        title: "Hochzeit von Cousine Tatjana",
        description: "09.10.2024",
        link: "/page9",
    },
    {
        id: 10,
        value: 1,
        x: 16,
        imageUrl:
        "/images/work.png",
        title: "Erster Tag im neuen Job",
        description: "10.10.2024",
        link: "/page10",
    },
    {
        id: 11,
        value: -1.2,
        x: 18,
        imageUrl:
        "/images/klasse.png",
        title: "Klassentreffen nach vielen Jahren",
        description: "11.10.2024",
        link: "/page11",
    },
    {
        id: 12,
        value: -0.6,
        x: 20,
        imageUrl:
        "/images/familie.png",
        title: "Familienabendessen",
        description: "12.10.2024",
        link: "/page12",
    },
    {
        id: 13,
        value: 2.7,
        x: 22,
        imageUrl:
            "/images/kinobesuch.png",
        title: "Kinobesuch mit der ganzen Familie",
        description: "13.10.2024",
        link: "/page13",
    },
    {
        id: 14,
        value: 0,
        x: 24,
        imageUrl:
        "/images/entspannung.png",
        title: "Entspannung",
        description: "14.10.2024",
        link: "/page14",
    },
    {
        id: 15,
        value: -2.9,
        x: 26,
        imageUrl: "/images/sonntag.png",
        title: "Geruhsamer Sonntag",
        description: "15.10.2024",
        link: "/page15",
    },
    {
        id: 16,
        value: 1.5,
        x: 28,
        imageUrl:
        "/images/kindergeburtstag.png",
        title: "Kindergeburtstag",
        description: "16.10.2024",
        link: "/page16",
    },
    {
        id: 17,
        value: 0,
        x: 30,
        imageUrl:
        "/images/familie2.png",
        title: "Spaziergang mit der Familie",
        description: "17.10.2024",
        link: "/page17",
    },
    {
        id: 18,
        value: 2.1,
        x: 32,
        imageUrl:
        "/images/grosseltern.png",
        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: 100,
            // tooltipHeight: 100,
        }
    );
    
    // 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") as HTMLElement;

    let isDown = false;
    let startX: number;
    let scrollLeft: number;

    
    // Mouse events
    scrollContainer.addEventListener("mousedown", (e) => {
        isDown = true;
        scrollContainer.classList.add("active");
        startX = e.pageX - scrollContainer.offsetLeft;
        scrollLeft = scrollContainer.scrollLeft;

        // Remove smooth scrolling while dragging
        scrollContainer.classList.remove("smooth-scroll");
    });

    scrollContainer.addEventListener("mouseleave", () => {
        if (!isDown) return;
        isDown = false;
        scrollContainer.classList.remove("active");

        // Add smooth scrolling after dragging
        scrollContainer.classList.add("smooth-scroll");
    });

    scrollContainer.addEventListener("mouseup", () => {
        if (!isDown) return;
        isDown = false;
        scrollContainer.classList.remove("active");

        // Add smooth scrolling after dragging
        scrollContainer.classList.add("smooth-scroll");
    });

    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;
    });

    // Touch events
    scrollContainer.addEventListener("touchstart", (e) => {
        isDown = true;
        scrollContainer.classList.add("active");
        startX = e.touches[0].pageX - scrollContainer.offsetLeft;
        scrollLeft = scrollContainer.scrollLeft;
        
        // Remove smooth scrolling while dragging
        scrollContainer.classList.remove("smooth-scroll");
    });

    scrollContainer.addEventListener("touchend", () => {
        if (!isDown) return;
        isDown = false;
        scrollContainer.classList.remove("active");

        // Add smooth scrolling after dragging
        scrollContainer.classList.add("smooth-scroll");
    });

    scrollContainer.addEventListener("touchmove", (e) => {
        if (!isDown) return;
        e.preventDefault();
        const x = e.touches[0].pageX - scrollContainer.offsetLeft;
        const walk = (x - startX) * 3;
        scrollContainer.scrollLeft = scrollLeft - walk;
    });
});