"use client"

import { Ticker } from "motion-plus/react"
import { motion, useScroll, useTransform } from "motion/react"
import { useState } from "react"

function Box({
    src,
    title,
    setCurrentItem,
}: {
    src: string
    title: string
    setCurrentItem: (item: string) => void
}) {
    return (
        <div className="item">
            <motion.img
                src={`/photos/boxart/n64/${src}.jpg`}
                alt={title + " boxart"}
                draggable={false}
                onViewportEnter={() => setCurrentItem(title)}
                viewport={{ amount: 1 }}
            />
        </div>
    )
}

export default function TickerDraggable() {
    const { scrollY } = useScroll()
    const [currentItem, setCurrentItem] = useState("Mario Kart 64")

    const reverseOffset = useTransform(() => scrollY.get() * -1)

    return (
        <>
            <Ticker
                className="ticker"
                id="top-ticker"
                items={[<span>{currentItem}</span>]}
                style={{ position: "fixed" }}
                offset={scrollY}
            />
            <Ticker
                className="ticker"
                id="bottom-ticker"
                items={[<span>{currentItem}</span>]}
                style={{ position: "fixed" }}
                offset={reverseOffset}
            />
            <Box
                src="mariokart64"
                title="Mario Kart 64"
                setCurrentItem={setCurrentItem}
            />
            <Box
                src="goldeneye"
                title="GoldenEye 007"
                setCurrentItem={setCurrentItem}
            />
            <Box
                src="mario64"
                title="Super Mario 64"
                setCurrentItem={setCurrentItem}
            />
            <Box
                src="ocarinaoftime"
                title="Zelda: Ocarina of Time"
                setCurrentItem={setCurrentItem}
            />
            <Box
                src="smashbros"
                title="Super Smash Bros"
                setCurrentItem={setCurrentItem}
            />
            <Box
                src="1080"
                title="1080 Snowboarding"
                setCurrentItem={setCurrentItem}
            />
            <Box
                src="majorasmask"
                title="Majora's Mask"
                setCurrentItem={setCurrentItem}
            />
            <Box
                src="perfectdark"
                title="Perfect Dark"
                setCurrentItem={setCurrentItem}
            />
            <Box
                src="goemon"
                title="Mythical Ninja"
                setCurrentItem={setCurrentItem}
            />
            <Stylesheet />
        </>
    )
}

/**
 * ==============   Styles   ================
 */
function Stylesheet() {
    return (
        <style>
            {`
        @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@800&display=swap');
        
        #sandbox {
          align-items: stretch;
        }

        .container {
            display: flex;
            flex-direction: row;
            gap: 20px;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .item {
            height: 100vh;
            overflow: hidden;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .item img {
            width: 270px;
            height: 382.5px;
            object-fit: cover;
        }

        .ticker {
            position: fixed;
            left: 0;
            right: 0;
        }

        .ticker span {
            color: var(--background);
            -webkit-text-stroke: 1px #f5f5f5;
            text-stroke: 1px #f5f5f5;
            opacity: 0.5;
            font-size: 72px;
            font-family: "Barlow", sans-serif;
            font-weight: 800;
            font-style: normal;
        }

        #top-ticker {
            top: 80px;
        }

        #bottom-ticker {
            bottom: 80px;
        }

        @media (max-width: 768px) {
            .item img {
                width: 200px;
                height: 285px;
            }
        }
        
      `}
        </style>
    )
}