<template>
  <q-page>
    <div class="visualization-container">
      <div class="gradient-bg"></div>
      <div class="scroll-container" id="scroll-container"></div>
      <div class="median"></div>
    </div>
  </q-page>
</template>

<script>
import { onMounted, onBeforeUnmount, defineComponent } from 'vue'
import { ConnectedDotsVisualization } from "../utils/ConnectedDotsVisualization"

export default defineComponent({
  name: 'WavePage',
  setup() {
    let visualization = null;
    let isDown = false;
    let startX;
    let scrollLeft;
    
    // Function to handle cleanup of event listeners
    const cleanupEventListeners = () => {
      const scrollContainer = document.querySelector('.scroll-container');
      if (scrollContainer) {
        scrollContainer.removeEventListener('mousedown', handleMouseDown);
        scrollContainer.removeEventListener('mouseleave', handleMouseLeave);
        scrollContainer.removeEventListener('mouseup', handleMouseUp);
        scrollContainer.removeEventListener('mousemove', handleMouseMove);
        scrollContainer.removeEventListener('touchstart', handleTouchStart);
        scrollContainer.removeEventListener('touchend', handleTouchEnd);
        scrollContainer.removeEventListener('touchmove', handleTouchMove);
      }
      window.removeEventListener('resize', handleResize);
    };
    
    // Event handlers
    const handleResize = () => {
      if (visualization) {
        visualization.resize();
      }
    };
    
    const handleMouseDown = (e) => {
      const scrollContainer = e.currentTarget;
      isDown = true;
      scrollContainer.classList.add('active');
      startX = e.pageX - scrollContainer.offsetLeft;
      scrollLeft = scrollContainer.scrollLeft;
      scrollContainer.classList.remove('smooth-scroll');
    };
    
    const handleMouseLeave = (e) => {
      if (!isDown) return;
      isDown = false;
      e.currentTarget.classList.remove('active');
      e.currentTarget.classList.add('smooth-scroll');
    };
    
    const handleMouseUp = (e) => {
      if (!isDown) return;
      isDown = false;
      e.currentTarget.classList.remove('active');
      e.currentTarget.classList.add('smooth-scroll');
    };
    
    const handleMouseMove = (e) => {
      if (!isDown) return;
      e.preventDefault();
      const scrollContainer = e.currentTarget;
      const x = e.pageX - scrollContainer.offsetLeft;
      const walk = (x - startX) * 3;
      scrollContainer.scrollLeft = scrollLeft - walk;
    };
    
    const handleTouchStart = (e) => {
      const scrollContainer = e.currentTarget;
      isDown = true;
      scrollContainer.classList.add('active');
      startX = e.touches[0].pageX - scrollContainer.offsetLeft;
      scrollLeft = scrollContainer.scrollLeft;
      scrollContainer.classList.remove('smooth-scroll');
    };
    
    const handleTouchEnd = (e) => {
      if (!isDown) return;
      isDown = false;
      e.currentTarget.classList.remove('active');
      e.currentTarget.classList.add('smooth-scroll');
    };
    
    const handleTouchMove = (e) => {
      if (!isDown) return;
      e.preventDefault();
      const scrollContainer = e.currentTarget;
      const x = e.touches[0].pageX - scrollContainer.offsetLeft;
      const walk = (x - startX) * 3;
      scrollContainer.scrollLeft = scrollLeft - walk;
    };
    
    onMounted(() => {
      try {
        console.log("Initializing Wave visualization...");
        
        // Example sample dots data
				const sampleDots = [
					{
						id: 1,
						value: -1.8,
						x: -2,
						imageUrl: "/images/0_3.png",
						title: "Beginn des neuen Abenteuers",
						description: "01.10.2024",
						link: "/edit/1",
					},
					{
						id: 2,
						value: 1.2,
						x: 0,
						imageUrl: "/images/0_2.png",
						title: "Omas Annis Geburtstag",
						description: "02.10.2024",
						link: "/edit/2",
					},
					{
						id: 3,
						value: -0.6,
					 x: 2,
						imageUrl: "/images/disco.png",
						title: "Konzertbesuch mit Freunden",
						description: "03.10.2024",
						link: "/edit/3",
					},
					{
						id: 4,
						value: 3,
						x: 4,
						imageUrl: "/images/pferd.png",
						title: "Wanderreiten in den Bergen",
						description: "04.10.2024",
						link: "/edit/4",
					},
					{
						id: 5,
						value: 1,
						x: 6,
						imageUrl: "/images/gpt.png",
						title: "Ruhiger Tag zu Hause",
						description: "05.10.2024",
						link: "/edit/5",
					},
					{
						id: 6,
						value: -3,
						x: 8,
						imageUrl: "/images/oma.png",
						title: "Oma Erna verstorben",
						description: "06.10.2024",
						link: "/edit/6",
					},
					{
						id: 7,
						value: 1.5,
						x: 10,
						imageUrl: "/images/see.png",
						title: "Erholungsausflug zum See",
						description: "07.10.2024",
						link: "/edit/7",
					},
					{
						id: 8,
						value: 0,
						x: 12,
						imageUrl: "/images/feier.png",
						title: "Kleine Wochenendsfeier",
						description: "08.10.2024",
						link: "/edit/8",
					},
					{
						id: 9,
						value: 3,
						x: 14,
						imageUrl: "/images/hochzeit.png",
						title: "Hochzeit von Cousine Tatjana",
						description: "09.10.2024",
						link: "/edit/9",
					},
					{
						id: 10,
						value: 1,
						x: 16,
						imageUrl: "/images/work.png",
						title: "Erster Tag im neuen Job",
						description: "10.10.2024",
						link: "/edit/10",
					},
					{
						id: 11,
						value: -1.2,
						x: 18,
						imageUrl: "/images/klasse.png",
						title: "Klassentreffen nach vielen Jahren",
						description: "11.10.2024",
						link: "/edit/11",
					},
					{
						id: 12,
						value: -0.6,
						x: 20,
						imageUrl: "/images/familie.png",
						title: "Familienabendessen",
						description: "12.10.2024",
						link: "/edit/12",
					},
					{
						id: 13,
						value: 2.7,
						x: 22,
						imageUrl:
							"/images/kinobesuch.png",
						title: "Kinobesuch mit der ganzen Familie",
						description: "13.10.2024",
						link: "/edit/13",
					},
					{
						id: 14,
						value: 0,
						x: 24,
						imageUrl:
							"/images/entspannung.png",
						title: "Entspannung",
						description: "14.10.2024",
						link: "/edit/14",
					},
					{
						id: 15,
						value: -2.9,
						x: 26,
						imageUrl: "/images/sonntag.png",
						title: "Geruhsamer Sonntag",
						description: "15.10.2024",
						link: "/edit/15",
					},
					{
						id: 16,
						value: 1.5,
						x: 28,
						imageUrl:
							"/images/kindergeburtstag.png",
						title: "Kindergeburtstag",
						description: "16.10.2024",
						link: "/edit/16",
					},
					{
						id: 17,
						value: 0,
						x: 30,
						imageUrl:
							"/images/familie2.png",
						title: "Spaziergang mit der Familie",
						description: "17.10.2024",
						link: "/edit/17",
					},
					{
						id: 18,
						value: 2.1,
						x: 32,
						imageUrl:
							"/images/grosseltern.png",
						title: "Familienfeier bei den Großeltern",
						description: "18.10.2024",
						link: "/edit/18",
					},
				];

        // Initialize the visualization with the sample dots
        visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, {
          // Optional custom configuration
					dotRadius: 6,
        });

        // Handle window resize
        window.addEventListener('resize', handleResize);

        // Set up scroll interactions
        const scrollContainer = document.querySelector('.scroll-container');
        if (scrollContainer) {
          // Mouse events
          scrollContainer.addEventListener('mousedown', handleMouseDown);
          scrollContainer.addEventListener('mouseleave', handleMouseLeave);
          scrollContainer.addEventListener('mouseup', handleMouseUp);
          scrollContainer.addEventListener('mousemove', handleMouseMove);

          // Touch events
          scrollContainer.addEventListener('touchstart', handleTouchStart);
          scrollContainer.addEventListener('touchend', handleTouchEnd);
          scrollContainer.addEventListener('touchmove', handleTouchMove);
        }
      } catch (err) {
        console.error("Error initializing visualization:", err);
      }
    });
    
    // Clean up event listeners when component is unmounted
    onBeforeUnmount(() => {
      cleanupEventListeners();
    });

    return {}
  }
})
</script>