"use client"

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

export default function ViewportDetection() {
    const [isFullscreen, setIsFullscreen] = useState(false)
    const [state, setState] = useState(false)

    return (
        <div style={container}>
            <nav style={controls}>
                <button
                    style={button}
                    onClick={() => startTransition(() => setState(!state))}
                >
                    Toggle box position
                </button>
                <button
                    style={button}
                    onClick={() => setIsFullscreen(!isFullscreen)}
                >
                    Toggle container size
                </button>
            </nav>
            <section style={{ flex: 1 }}>
                <div
                    style={{
                        ...spacing,
                        height: isFullscreen ? "100vh" : "40vh",
                    }}
                >
                    <div style={boxContainer}>
                        {!state ? (
                            <ViewTransition name="box">
                                <div style={box} />
                            </ViewTransition>
                        ) : null}
                    </div>
                </div>
                <div
                    style={{
                        ...spacing,
                        height: isFullscreen ? "100vh" : "40vh",
                    }}
                >
                    <div style={boxContainer}>
                        {state ? (
                            <ViewTransition name="box">
                                <div style={box} />
                            </ViewTransition>
                        ) : null}
                    </div>
                </div>
            </section>
        </div>
    )
}

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

const controls: React.CSSProperties = {
    display: "flex",
    flexDirection: "column",
    gap: 10,
}

const container: React.CSSProperties = {
    display: "flex",
    alignItems: "flex-start",
    justifyContent: "center",
    gap: 20,
    padding: "80px 0",
    width: "100vw",
    maxWidth: 500,
}

const box: React.CSSProperties = {
    width: 100,
    height: 100,
    backgroundColor: "#f5f5f5",
    borderRadius: 10,
}

const spacing: React.CSSProperties = {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    border: "1px solid var(--border)",
    background: "var(--layer)",
    borderRadius: 10,
    margin: "0px 0px 10px",
}

const boxContainer: React.CSSProperties = {
    width: 100,
    height: 100,
    border: "1px dashed #f5f5f5",
    borderRadius: 10,
}

const button: React.CSSProperties = {
    background: "#0d63f8",
    color: "#f5f5f5",
    padding: 10,
    borderRadius: 10,
    cursor: "pointer",
}