"use client"

import * as DropdownMenu from "@radix-ui/react-dropdown-menu"
import { AnimatePresence, motion } from "motion/react"
import { useState } from "react"

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

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

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

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

                <AnimatePresence>
                    {open && (
                        <DropdownMenu.Portal forceMount>
                            <DropdownMenu.Content asChild sideOffset={10}>
                                <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>
                                    <DropdownMenu.Separator className="separator" />
                                    <DropdownItem>Delete</DropdownItem>
                                </motion.div>
                            </DropdownMenu.Content>
                        </DropdownMenu.Portal>
                    )}
                </AnimatePresence>
            </DropdownMenu.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: var(--layer);
                color: #f5f5f5;
                border: 1px solid var(--border);
                cursor: pointer;
            }

            .content {
                min-width: 160px;
                background-color: var(--layer);
                border: 1px solid var(--border);
                border-radius: 6px;
                padding: 4px;
                transform-origin: var(--radix-dropdown-menu-content-transform-origin);
                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: var(--border);
                margin: 4px 0;
            }
        `}</style>
    )
}

export default RadixDropdown