"use client"

import { Cursor, Ticker, useCursorState } from "motion-plus/react"
import { AnimatePresence, motion } from "motion/react"

function TickerImage({ src, zone }: { src: string; zone: string }) {
    return (
        <motion.img
            data-cursor-zone={zone}
            src={src}
            style={{
                width: 300 * 0.75,
                height: 400 * 0.75,
                borderRadius: 10,
                border: "1px solid #1d2628",
            }}
        />
    )
}

function getCursorContent(zone: string | null) {
    switch (zone) {
        case "japan-day":
            return { emojis: "🍜 🏯 🚅 🇯🇵", label: "Tokyo" }
        case "prague":
            return { emojis: "🏰 🍺 🌉 🇨🇿", label: "Prague" }
        case "london-night":
            return { emojis: "💷 👑 ☕️ 🇬🇧", label: "London" }
        default:
            return undefined
    }
}
export default function TickerCursor() {
    const { zone } = useCursorState()
    const content = getCursorContent(zone)

    return (
        <nav className="container">
            <TickerImage src="/photos/japan-day/4.jpg" zone="japan-day" />
            <TickerImage src="/photos/prague/1.jpg" zone="prague" />
            <TickerImage src="/photos/london-night/1.jpg" zone="london-night" />
            <AnimatePresence>
                {content && (
                    <Cursor
                        variants={{
                            initial: { scale: 0 },
                            default: { scale: 1 },
                            exit: { scale: 0 },
                        }}
                        style={{
                            display: "flex",
                            flexDirection: "column",
                            width: 100,
                            height: 100,
                            borderRadius: 60,
                            overflow: "hidden",
                            border: "10px solid #0f1115",
                            backgroundColor: "#0f1115",
                            color: "#f5f5f5",
                            textTransform: "uppercase",
                            fontSize: 20,
                            lineHeight: 1,
                        }}
                    >
                        <Ticker
                            key="ticker-1"
                            velocity={50}
                            items={[content.label, "•"]}
                            style={{ height: 20 }}
                        />
                        <Ticker
                            key="ticker-2"
                            velocity={-50}
                            items={[content.emojis]}
                            gap={5}
                            style={{ height: 20 }}
                        />
                        <Ticker
                            key="ticker-3"
                            velocity={50}
                            items={[content.label, "•"]}
                            style={{ height: 20 }}
                        />
                        <Ticker
                            key="ticker-4"
                            velocity={-50}
                            items={[content.emojis]}
                            gap={5}
                            style={{ height: 20 }}
                        />
                        <Ticker
                            key="ticker-5"
                            velocity={50}
                            items={[content.label, "•"]}
                            style={{ height: 20 }}
                        />
                    </Cursor>
                )}
            </AnimatePresence>
            <Stylesheet />
        </nav>
    )
}

/**
 * ==============   Styles   ================
 */
function Stylesheet() {
    return (
        <style>
            {`
        #sandbox {
          align-items: stretch;
        }

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

       
      `}
        </style>
    )
}