"use client"

import { ContextMenu } from "@base-ui-components/react/context-menu"
import { AnimatePresence, motion } from "motion/react"
import { useState } from "react"

function BaseContextMenu() {
    const [open, setOpen] = useState(false)
    const [bookmarksChecked, setBookmarksChecked] = useState(true)
    const [urlsChecked, setUrlsChecked] = useState(false)

    return (
        <div className="container">
            <ContextMenu.Root open={open} onOpenChange={setOpen}>
                <ContextMenu.Trigger className="trigger">
                    <div className="trigger-content">Right-click here</div>
                </ContextMenu.Trigger>

                <AnimatePresence>
                    {open && (
                        <ContextMenu.Portal keepMounted>
                            <ContextMenu.Positioner>
                                <ContextMenu.Popup
                                    className="content"
                                    render={
                                        <motion.div
                                            initial={{ opacity: 0, scale: 0.9 }}
                                            animate={{ opacity: 1, scale: 1 }}
                                            exit={{
                                                opacity: 0,
                                                scale: 0.9,
                                                transition: {
                                                    duration: 0.1,
                                                },
                                            }}
                                            transition={{
                                                type: "spring",
                                                stiffness: 400,
                                                damping: 20,
                                                opacity: { duration: 0.2 },
                                            }}
                                            style={{ originX: 0, originY: 0 }}
                                        >
                                            <ContextMenu.Item className="item">
                                                Back{" "}
                                                <div className="shortcut">
                                                    ⌘+[
                                                </div>
                                            </ContextMenu.Item>
                                            <ContextMenu.Item
                                                className="item"
                                                disabled
                                            >
                                                Forward{" "}
                                                <div className="shortcut">
                                                    ⌘+]
                                                </div>
                                            </ContextMenu.Item>
                                            <ContextMenu.Item className="item">
                                                Reload{" "}
                                                <div className="shortcut">
                                                    ⌘+R
                                                </div>
                                            </ContextMenu.Item>

                                            <ContextMenu.SubmenuRoot>
                                                <ContextMenu.SubmenuTrigger className="item">
                                                    More Tools
                                                    <div className="chevron">
                                                        ›
                                                    </div>
                                                </ContextMenu.SubmenuTrigger>
                                                <ContextMenu.Portal>
                                                    <ContextMenu.Positioner>
                                                        <ContextMenu.Popup
                                                            className="content"
                                                            render={
                                                                <motion.div
                                                                    initial={{
                                                                        opacity: 0,
                                                                        x: -10,
                                                                    }}
                                                                    animate={{
                                                                        opacity: 1,
                                                                        x: 0,
                                                                    }}
                                                                    transition={{
                                                                        type: "spring",
                                                                        stiffness: 400,
                                                                        damping: 20,
                                                                        opacity:
                                                                            {
                                                                                duration: 0.2,
                                                                            },
                                                                    }}
                                                                >
                                                                    <ContextMenu.Item className="item">
                                                                        Save
                                                                        Page As…{" "}
                                                                        <div className="shortcut">
                                                                            ⌘+S
                                                                        </div>
                                                                    </ContextMenu.Item>
                                                                    <ContextMenu.Item className="item">
                                                                        Create
                                                                        Shortcut…
                                                                    </ContextMenu.Item>
                                                                    <ContextMenu.Item className="item">
                                                                        Name
                                                                        Window…
                                                                    </ContextMenu.Item>
                                                                    <ContextMenu.Separator className="separator" />
                                                                    <ContextMenu.Item className="item">
                                                                        Developer
                                                                        Tools
                                                                    </ContextMenu.Item>
                                                                </motion.div>
                                                            }
                                                        />
                                                    </ContextMenu.Positioner>
                                                </ContextMenu.Portal>
                                            </ContextMenu.SubmenuRoot>

                                            <ContextMenu.Separator className="separator" />

                                            <ContextMenu.CheckboxItem
                                                className="item"
                                                checked={bookmarksChecked}
                                                onCheckedChange={
                                                    setBookmarksChecked
                                                }
                                            >
                                                <ContextMenu.CheckboxItemIndicator className="indicator">
                                                    ✓
                                                </ContextMenu.CheckboxItemIndicator>
                                                Show Bookmarks{" "}
                                                <div className="shortcut">
                                                    ⌘+B
                                                </div>
                                            </ContextMenu.CheckboxItem>
                                            <ContextMenu.CheckboxItem
                                                className="item"
                                                checked={urlsChecked}
                                                onCheckedChange={setUrlsChecked}
                                            >
                                                <ContextMenu.CheckboxItemIndicator className="indicator">
                                                    ✓
                                                </ContextMenu.CheckboxItemIndicator>
                                                Show Full URLs
                                            </ContextMenu.CheckboxItem>
                                        </motion.div>
                                    }
                                />
                            </ContextMenu.Positioner>
                        </ContextMenu.Portal>
                    )}
                </AnimatePresence>
            </ContextMenu.Root>
            <StyleSheet />
        </div>
    )
}

/**
 * ==============   Styles   ================
 */
function StyleSheet() {
    return (
        <style>{`
            .container {
                display: flex;
                align-items: center;
                justify-content: center;
                min-height: 200px;
                background-color: #0b1011;
                border: 1px solid #1d2628;
                border-radius: 6px;
            }

            .trigger {
                display: block;
                width: 300px;
                height: 200px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .content {
                background-color: var(--layer-transparent);
                backdrop-filter: blur(10px);
                border: 1px solid #1d2628;
                color: #f5f5f5;
                border-radius: 6px;
                padding: 4px;
                transform-origin: var(--radix-context-menu-content-transform-origin);
            }

            .item {
                width: 100%;
                padding: 8px 12px;
                border: none;
                background: none;
                text-align: left;
                border-radius: 4px;
                cursor: pointer;
                font-size: 14px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                box-sizing: border-box;
                outline: none;
            }

            .item[data-disabled] {
                color: var(--feint-text);
                cursor: not-allowed;
            }

            .item[data-highlighted] {
                background-color: #ff0088;
                outline: none;
            }

            .item[data-highlighted] .shortcut {
                color: #f5f5f5;
            }

            .item.danger {
                color: #ff0088;
            }

            .shortcut {
                color: var(--feint-text);
                font-size: 12px;
                margin-left: 16px;
            }

            .separator {
                height: 1px;
                background-color: #333;
                margin: 4px 0;
            }

            .indicator {
                margin-right: 8px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 16px;
                color: #ff0088;
            }

            .chevron {
                color: var(--feint-text);
                font-size: 16px;
                margin-left: 8px;
            }

            .item[data-highlighted] .chevron {
                color: #f5f5f5;
            }

            /* Remove all default outlines from Base UI components */
            [data-base-ui] {
                outline: none !important;
            }

            /* Specifically target context menu components */
            [role="menu"],
            [data-open],
            [data-closed] {
                outline: none !important;
            }

            /* Remove focus outlines from the content area */
            .content,
            .content * {
                outline: none !important;
            }
        `}</style>
    )
}

export default BaseContextMenu