"use client"

import { AnimatePresence, motion } from "motion/react"
import { Tooltip } from "radix-ui"
import React from "react"

const spring = {
    visualDuration: 0.3,
    type: "spring",
    bounce: 0.6,
}

export default function RadixTooltip() {
    const [open, setOpen] = React.useState(false)

    return (
        <Tooltip.Provider>
            <Tooltip.Root open={open} onOpenChange={setOpen}>
                <Tooltip.Trigger asChild>
                    <button className="tooltip-trigger">
                        Hover or focus <PlusIcon />
                    </button>
                </Tooltip.Trigger>
                <AnimatePresence>
                    {open && (
                        <Tooltip.Portal forceMount>
                            <Tooltip.Content asChild sideOffset={10}>
                                <motion.div
                                    className="tooltip-content"
                                    initial={{ opacity: 0, y: 20, scale: 0.8 }}
                                    animate={{ opacity: 1, y: 0, scale: 1 }}
                                    exit={{
                                        opacity: 0,
                                        y: 20,
                                        scale: 0.8,
                                        transition: { duration: 0.1 },
                                    }}
                                    transition={{
                                        ...spring,
                                        opacity: { ...spring, bounce: 0 },
                                    }}
                                >
                                    Add to library
                                    <Tooltip.Arrow className="tooltip-arrow" />
                                </motion.div>
                            </Tooltip.Content>
                        </Tooltip.Portal>
                    )}
                </AnimatePresence>
            </Tooltip.Root>
            <StyleSheet />
        </Tooltip.Provider>
    )
}

/**
 * ==============   Icons   ================
 */

function PlusIcon() {
    return (
        <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="3"
            strokeLinecap="round"
            strokeLinejoin="round"
        >
            <path d="M12 5v14M5 12h14" />
        </svg>
    )
}

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

function StyleSheet() {
    return (
        <style>{`
        .tooltip-content {
            border-radius: 4px;
            padding: 10px 15px;
            font-size: 18px;
            line-height: 1;
            color: #f5f5f5;
            background-color: #0cdcf7;
            user-select: none;
            will-change: transform, opacity;
            color: #0f1115;
        }

        .tooltip-arrow {
            fill: #0cdcf7;
        }

        .tooltip-trigger {
            font-family: inherit;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #0f1115;
            background-color: var(--layer);
            border: 1px solid var(--border);
            color: #f5f5f5;
            user-select: none;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 15px;
        }
    `}</style>
    )
}