Tooltip

"use client"

import type { CSSProperties } from "react"
import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
import * as stylex from "@stylexjs/stylex"
import type { StyleXStyles } from "@stylexjs/stylex"

import { stateStyles } from "@/lib/state-styles"
import { states } from "@/theme/states"
import { color, duration, ease, layer, leading, radius, space, text } from "@/theme/tokens.stylex"

const styles = stylex.create({
  hidden: { opacity: 0 },
  content: {
    zIndex: layer.popup,
    display: "inline-flex",
    alignItems: "center",
    gap: space.s1_5,
    width: "fit-content",
    maxWidth: "20rem",
    borderRadius: radius.md,
    paddingInline: space.s3,
    paddingBlock: space.s1_5,
    backgroundColor: color.foreground,
    color: color.background,
    boxShadow: `inset 0 1px 0 ${color.buttonPrimaryHighlight}, 0 4px 12px -2px ${color.popupShadowFar}`,
    fontSize: text.xs,
    lineHeight: leading.xs,
    transformOrigin: "var(--transform-origin)",
    transitionProperty: "opacity, transform",
    transitionDuration: {
      default: duration.fade,
      "@media (prefers-reduced-motion: reduce)": "0s",
    },
    transitionTimingFunction: ease.standard,
  },
  instant: { transitionDuration: "0s" },
  arrow: {
    zIndex: layer.popup,
    width: space.s2_5,
    height: space.s2_5,
    borderRadius: 2,
    backgroundColor: color.foreground,
  },
})

const arrowSides = stylex.create({
  top: {
    bottom: `calc(-1 * ${space.s2_5})`,
    transform: "translateY(calc(-50% - 2px)) rotate(45deg)",
  },
  bottom: { top: space.s1, transform: "translateY(calc(-50% - 2px)) rotate(45deg)" },
  left: { right: `calc(-1 * ${space.s1})`, transform: "rotate(45deg)" },
  right: { left: `calc(-1 * ${space.s1})`, transform: "rotate(45deg)" },
  "inline-start": { right: `calc(-1 * ${space.s1})`, transform: "rotate(45deg)" },
  "inline-end": { left: `calc(-1 * ${space.s1})`, transform: "rotate(45deg)" },
})

const slide = stylex.create({
  top: { transform: `scale(0.95) translateY(${space.s2})` },
  bottom: { transform: `scale(0.95) translateY(calc(-1 * ${space.s2}))` },
  left: { transform: `scale(0.95) translateX(${space.s2})` },
  right: { transform: `scale(0.95) translateX(calc(-1 * ${space.s2}))` },
  "inline-start": { transform: `scale(0.95) translateX(${space.s2})` },
  "inline-end": { transform: `scale(0.95) translateX(calc(-1 * ${space.s2}))` },
})

type Overrides = { xstyle?: StyleXStyles; className?: string }

type StateOverrides = Overrides & { style?: CSSProperties }

function TooltipProvider({ delay = 0, ...props }: TooltipPrimitive.Provider.Props) {
  return <TooltipPrimitive.Provider delay={delay} {...props} />
}

function Tooltip<Payload>(props: TooltipPrimitive.Root.Props<Payload>) {
  return <TooltipPrimitive.Root {...props} />
}

function TooltipTrigger<Payload>(props: TooltipPrimitive.Trigger.Props<Payload>) {
  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
}

type TooltipContentProps = Omit<TooltipPrimitive.Popup.Props, "className" | "style"> &
  Pick<TooltipPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset"> &
  StateOverrides

function TooltipContent({
  xstyle,
  style,
  className,
  side = "top",
  sideOffset = 4,
  align = "center",
  alignOffset = 0,
  children,
  ...props
}: TooltipContentProps) {
  return (
    <TooltipPrimitive.Portal>
      <TooltipPrimitive.Positioner
        align={align}
        alignOffset={alignOffset}
        side={side}
        sideOffset={sideOffset}
        {...stylex.props(states.positioner)}
      >
        <TooltipPrimitive.Popup
          data-slot="tooltip-content"
          {...props}
          {...stateStyles(
            (state) => [
              styles.content,
              (state.transitionStatus === "starting" || state.transitionStatus === "ending") &&
                styles.hidden,
              (state.transitionStatus === "starting" || state.transitionStatus === "ending") &&
                slide[state.side],
              state.instant && styles.instant,
              xstyle,
            ],
            {
              className,
              style,
            },
          )}
        >
          {children}
          <TooltipPrimitive.Arrow
            data-slot="tooltip-arrow"
            {...stateStyles((state) => [styles.arrow, arrowSides[state.side]])}
          />
        </TooltipPrimitive.Popup>
      </TooltipPrimitive.Positioner>
    </TooltipPrimitive.Portal>
  )
}

export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }

import "./styles/theme.css"
import "./styles/interop.css"
import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
import { TooltipProvider } from "@/components/ui/tooltip"
import App from "./App"

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <TooltipProvider>
      <App />
    </TooltipProvider>
  </StrictMode>,
)