antoncoding/monarch

// eslint-disable jsx-a11y/click-events-have-key-events
// eslint-disable jsx-a11y/no-static-element-interactions
'use client';

import { useState, useEffect, useRef } from 'react';
import Image from 'next/image';
import Header from '@/components/layout/header/Header';
import { sections } from './sectionData';

function InfoPage() {
  const [currentSection, setCurrentSection] = useState(0);
  const [isClient, setIsClient] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);
  const [isTransitioning, setIsTransitioning] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  const changeSection = (direction: 'next' | 'prev') => {
    if (isTransitioning) return;
    setIsTransitioning(true);
    setCurrentSection((prev) => {
      if (direction === 'next') {
        return (prev + 1) % sections.length;
      } else {
        return (prev - 1 + sections.length) % sections.length;
      }
    });
    setTimeout(() => setIsTransitioning(false), 500);
  };

  // eslint-disable-next-line react-hooks/exhaustive-deps
  const nextSection = () => changeSection('next');
  // eslint-disable-next-line react-hooks/exhaustive-deps
  const prevSection = () => changeSection('prev');

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    let lastScrollTime = 0;
    const scrollCooldown = 1000; // 1 second cooldown

    const handleWheel = (e: WheelEvent) => {
      e.preventDefault();
      const now = new Date().getTime();
      if (now - lastScrollTime < scrollCooldown) return;

      if (e.deltaY > 0) {
        nextSection();
      } else {
        prevSection();
      }
      lastScrollTime = now;
    };

    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'ArrowDown') {
        nextSection();
      } else if (e.key === 'ArrowUp') {
        prevSection();
      }
    };

    container.addEventListener('wheel', handleWheel, { passive: false });
    window.addEventListener('keydown', handleKeyDown);

    return () => {
      container.removeEventListener('wheel', handleWheel);
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, [nextSection, prevSection]);

  if (!isClient) {
    return null; // or a loading spinner
  }

  return (
    <div className="flex min-h-screen flex-col font-zen" ref={containerRef}>
      <Header />
      <main className="flex flex-grow flex-col overflow-hidden pt-8">
        <div className="relative flex-grow overflow-hidden">
          <div
            className="absolute inset-0 flex flex-col transition-transform duration-500 ease-in-out"
            style={{ transform: `translateY(-${currentSection * 100}%)` }}
          >
            {sections.map((section) => (
              <div
                key={section.mainTitle}
                className="flex h-full w-full flex-shrink-0 flex-col items-center justify-start px-4 md:px-0"
              >
                <div className="w-full max-w-4xl">
                  <h1 className="mb-2 text-center text-4xl font-bold">{section.mainTitle}</h1>
                  <h2 className="mb-4 text-center text-xl text-secondary">{section.subTitle}</h2>
                  <div className="flex max-h-[calc(100vh-250px)] flex-col items-center gap-8 overflow-y-auto">
                    <div className="flex w-full items-center justify-center overflow-hidden rounded-lg">
                      <Image
                        src={section.image}
                        alt={section.mainTitle}
                        height={section.customHeight ? section.customHeight : 250}
                        objectFit="cover"
                        className="rounded-lg"
                      />
                    </div>
                    <div className="w-full px-4 pb-8">{section.content}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </main>
      <nav className="fixed bottom-8 left-1/2 flex -translate-x-1/2 transform space-x-2">
        {sections.map((_, index) => (
          <button
            type="button"
            key={index}
            className={`h-2 w-2 cursor-pointer rounded-full ${
              index === currentSection ? 'bg-monarch-orange' : 'bg-gray-300'
            }`}
            onClick={() => setCurrentSection(index)}
            aria-label={`Go to section ${index + 1}`}
          />
        ))}
      </nav>
    </div>
  );
}

export default InfoPage;