"use client"

import { Tooltip } from "@base-ui-components/react/tooltip"
import { AnimatePresence, motion, Transition } from "motion/react"
import React from "react"

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

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

    return (
        <Tooltip.Provider>
            <Tooltip.Root open={open} onOpenChange={setOpen}>
                <Tooltip.Trigger
                    className="tooltip-trigger"
                    render={<button>Long hover or focus</button>}
                />
                <AnimatePresence>
                    {open && (
                        <Tooltip.Portal>
                            <Tooltip.Positioner>
                                <Tooltip.Popup
                                    className="tooltip-content"
                                    render={
                                        <motion.div
                                            initial={{
                                                opacity: 0,
                                                y: 20,
                                                scale: 0.8,
                                            }}
                                            animate={{
                                                opacity: 1,
                                                y: 0,
                                                scale: 1,
                                            }}
                                            exit={{
                                                opacity: 0,
                                                y: 20,
                                                scale: 0.8,
                                            }}
                                            transition={spring}
                                        >
                                            Add to library
                                            <Tooltip.Arrow
                                                style={{
                                                    transform: "rotate(180deg)",
                                                    bottom: -13,
                                                }}
                                            >
                                                <Arrow />
                                            </Tooltip.Arrow>
                                        </motion.div>
                                    }
                                />
                            </Tooltip.Positioner>
                        </Tooltip.Portal>
                    )}
                </AnimatePresence>
            </Tooltip.Root>
            <StyleSheet />
        </Tooltip.Provider>
    )
}

function Arrow(props: React.ComponentProps<"svg">) {
    return (
        <svg width="20" height="10" viewBox="0 0 20 10" {...props}>
            <path
                d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
                className="tooltip-arrow"
            />
        </svg>
    )
}

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

            .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;
                background: #0d63f8;
                user-select: none;
                animation-duration: 400ms;
                animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
                will-change: transform, opacity;
            }

            .tooltip-arrow {
                fill: #0d63f8;
            }
        `}</style>
    )
}