"use client"

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

const highlight = {
    backgroundColor: "#9911ff",
}

function DropdownItem({ children }: { children: React.ReactNode }) {
    return (
        <Menu.Item
            render={
                <motion.button
                    className="item"
                    whileHover={highlight}
                    whileFocus={highlight}
                    whileTap={{ scale: 0.95 }}
                >
                    {children}
                </motion.button>
            }
        />
    )
}

function BaseMenu() {
    const [open, setOpen] = useState(false)

    return (
        <div className="container">
            <Menu.Root open={open} onOpenChange={setOpen}>
                <Menu.Trigger
                    render={
                        <motion.button
                            className="trigger"
                            whileHover={{ scale: 1.05 }}
                            whileTap={{ scale: 0.95 }}
                        >
                            Options ▾
                        </motion.button>
                    }
                />

                <AnimatePresence>
                    {open && (
                        <Menu.Portal>
                            <Menu.Positioner>
                                <Menu.Popup
                                    render={
                                        <motion.div
                                            className="content"
                                            initial={{
                                                opacity: 0,
                                                scale: 0.85,
                                            }}
                                            animate={{ opacity: 1, scale: 1 }}
                                            exit={{ opacity: 0, scale: 0.85 }}
                                            transition={{ duration: 0.2 }}
                                            style={{
                                                willChange:
                                                    "transform, opacity",
                                            }}
                                        >
                                            <DropdownItem>Edit</DropdownItem>
                                            <DropdownItem>
                                                Duplicate
                                            </DropdownItem>
                                            <Menu.Separator className="separator" />
                                            <DropdownItem>Delete</DropdownItem>
                                        </motion.div>
                                    }
                                />
                            </Menu.Positioner>
                        </Menu.Portal>
                    )}
                </AnimatePresence>
            </Menu.Root>
            <StyleSheet />
        </div>
    )
}

/**
 * ==============   Styles   ================
 */
function StyleSheet() {
    return (
        <style>{`
            .container {
                display: flex;
                align-items: center;
                justify-content: center;
                min-height: 200px;
            }

            .trigger {
                padding: 8px 16px;
                border-radius: 6px;
                background-color: #0b1011;
                color: #f5f5f5;
                border: 1px solid #1d2628;
                cursor: pointer;
            }

            .content {
                min-width: 160px;
                background-color: #0b1011;
                border: 1px solid #1d2628;
                border-radius: 6px;
                padding: 4px;
                z-index: 1000;
                box-sizing: border-box;
            }

            .item {
                width: 100%;
                padding: 8px 12px;
                border: none;
                background: none;
                color: #f5f5f5;
                text-align: left;
                border-radius: 4px;
                cursor: pointer;
                font-size: 14px;
                box-sizing: border-box;
            }

            .separator {
                height: 1px;
                background-color: #1d2628;
                margin: 4px 0;
            }
        `}</style>
    )
}

export default BaseMenu