"use client"

import * as ContextMenu from "@radix-ui/react-context-menu"
import { CheckIcon, ChevronRightIcon } from "@radix-ui/react-icons"
import { motion } from "motion/react"
import { useState } from "react"

/**
 * Note: This example doesn't use AnimatePresence to add exit animations
 * because ContextMenu.Root doesn't support controlled state. We need access
 * to this state for AnimatePresence to conditionally render the children.
 */
function RadixContextMenu() {
    const [bookmarksChecked, setBookmarksChecked] = useState(true)
    const [urlsChecked, setUrlsChecked] = useState(false)

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

                <ContextMenu.Portal>
                    <ContextMenu.Content asChild>
                        <motion.div
                            className="content"
                            initial={{ opacity: 0, scale: 0.9 }}
                            animate={{ opacity: 1, scale: 1 }}
                            transition={{
                                type: "spring",
                                stiffness: 400,
                                damping: 20,
                                opacity: { duration: 0.2 },
                            }}
                        >
                            <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.Sub>
                                <ContextMenu.SubTrigger className="item">
                                    More Tools
                                    <ChevronRightIcon />
                                </ContextMenu.SubTrigger>
                                <ContextMenu.Portal>
                                    <ContextMenu.SubContent asChild>
                                        <motion.div
                                            className="content"
                                            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.SubContent>
                                </ContextMenu.Portal>
                            </ContextMenu.Sub>

                            <ContextMenu.Separator className="separator" />

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

/**
 * ==============   Styles   ================
 */
function StyleSheet() {
    return (
        <style>{`
            .container {
                display: flex;
                align-items: center;
                justify-content: center;
                min-height: 200px;
                background-color: var(--layer);
                border: 1px solid var(--border);
                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 var(--border);
                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;
            }

            .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;
            }
        `}</style>
    )
}

export default RadixContextMenu