"use client"

import {
    startTransition,
    useState,
    unstable_ViewTransition as ViewTransition,
} from "react"

type Menu = "js" | "react"

export default function SwitchMenu() {
    const [activeMenu, setActiveMenu] = useState<Menu>("js")

    const selectMenu = (newMenu: Menu) => {
        startTransition(() => setActiveMenu(newMenu))
    }

    return (
        <section style={container}>
            <nav style={switcherContainer}>
                <button style={option} onClick={() => selectMenu("js")}>
                    JS
                    {activeMenu === "js" ? (
                        <ViewTransition name="underline">
                            <Underline />
                        </ViewTransition>
                    ) : null}
                </button>
                <button style={option} onClick={() => selectMenu("react")}>
                    React
                    {activeMenu === "react" ? (
                        <ViewTransition name="underline">
                            <Underline />
                        </ViewTransition>
                    ) : null}
                </button>
            </nav>
            <ViewTransition>
                {activeMenu === "js" ? <JSMenu /> : <ReactMenu />}
            </ViewTransition>
        </section>
    )
}

function Underline() {
    return <div style={underline} />
}

function JSMenu() {
    return (
        <nav style={menuContainer}>
            <h3 style={menuTitle}>JavaScript</h3>
            <ul style={menuList}>
                <li>
                    <a href="#" style={link}>
                        Get started
                    </a>
                </li>
                <li>
                    <a href="#" style={link}>
                        Scroll animations
                    </a>
                </li>
                <li>
                    <a href="#" style={link}>
                        View animations
                    </a>
                </li>
            </ul>
        </nav>
    )
}

function ReactMenu() {
    return (
        <nav style={menuContainer}>
            <h3 style={menuTitle}>React</h3>
            <ul style={menuList}>
                <li>
                    <a href="#" style={link}>
                        Get started
                    </a>
                </li>
                <li>
                    <a href="#" style={link}>
                        Scroll animations
                    </a>
                </li>
                <li>
                    <a href="#" style={link}>
                        Layout animations
                    </a>
                </li>
                <li>
                    <a href="#" style={link}>
                        Motion values
                    </a>
                </li>
            </ul>
        </nav>
    )
}

/**
 * ==============   Styles   ================
 */

const container: React.CSSProperties = {
    background: "var(--layer)",
    color: "#f5f5f5",
    border: "1px solid var(--border)",
    display: "flex",
    flexDirection: "column",
    justifyContent: "flex-start",
    alignItems: "stretch",
    height: 200,
    borderRadius: 10,
}

const switcherContainer: React.CSSProperties = {
    display: "flex",
    gap: 10,
    justifyContent: "stretch",
    padding: 10,
    width: 200,
}

const option: React.CSSProperties = {
    position: "relative",
    flex: 1,
    padding: "5px 0px",
}

const underline: React.CSSProperties = {
    position: "absolute",
    bottom: 0,
    left: 0,
    width: "100%",
    height: 2,
    backgroundColor: "#0d63f8",
}

const menuContainer: React.CSSProperties = {
    borderRadius: 10,
    display: "flex",
    flexDirection: "column",
    justifyContent: "flex-start",
    padding: 20,
}

const menuTitle: React.CSSProperties = {
    margin: 0,
    padding: 0,
}

const menuList: React.CSSProperties = {
    listStyle: "none",
    padding: 0,
    margin: 0,
}

const link: React.CSSProperties = {
    textDecoration: "none",
    color: "#0d63f8",
}