"use client"

import * as React from "react"
import { Tooltip as TooltipPrimitive } from "radix-ui"

import { getAkashicPortalContainer } from "../../lib/getAkashicPortalContainer"
import { cn } from "../../lib/utils"
// ABOVE A MODAL AND A FLOATING WINDOW - same reasoning as `ui/select` and `ui/dropdown-menu`. A
// tooltip is anchored to a trigger that may sit inside either, so it has to clear both or it paints
// behind the surface its own trigger is on. See `lib/stackingLayers.ts`.
import { Z_POPOVER_CLASS } from "../../lib/stackingLayers"

/**
 * `Tooltip` is the replacement for `@wordpress/components`' `Tooltip` - **1 import**, built on Radix.
 *
 * AN ADAPTER, NOT A RENAME. Radix splits a tooltip into Provider, Root, Trigger, Portal and Content;
 * WordPress is one element wrapping one child, with the text as a prop:
 *
 * <Tooltip text={original.help}><button... /></Tooltip>
 *
 * The Provider is inside rather than at the app root on purpose - Radix allows nested providers, and
 * a component that needs no setup is what makes the swap one line. WP's 700ms delay is kept as the
 * default so the hover feel does not change.
 *
 * The tooltip is a DESCRIPTION, not a name. Radix wires `aria-describedby` on the trigger, which is
 * why the existing call site had to add its own `aria-label` and still needs it.
 *
 * `text` is the only prop either WP call site passes. WP renders the child unchanged when `text` is
 * empty, and so does this.
 */

export interface TooltipProps {
  /** WP's prop name. Empty means no tooltip at all, which is WP's behaviour. */
  text?: React.ReactNode
  /** Hover delay in ms. WP's default is 700. */
  delay?: number
  children: React.ReactNode
  className?: string
}

function Tooltip({ text, delay = 700, children, className }: TooltipProps) {
  if (!text) return <>{children}</>

  return (
    <TooltipPrimitive.Provider delayDuration={delay}>
      <TooltipPrimitive.Root>
        <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
        <TooltipPrimitive.Portal container={getAkashicPortalContainer()}>
          <TooltipPrimitive.Content
            data-slot="tooltip-content"
            sideOffset={4}
            className={cn(
              Z_POPOVER_CLASS,
              "bg-popover text-popover-foreground border-border max-w-xs rounded-md border px-2.5 py-1.5 text-sm shadow-md",
              "animate-in fade-in-0 zoom-in-95",
              className
            )}
          >
            {text}
            <TooltipPrimitive.Arrow className="fill-popover" />
          </TooltipPrimitive.Content>
        </TooltipPrimitive.Portal>
      </TooltipPrimitive.Root>
    </TooltipPrimitive.Provider>
  )
}

export { Tooltip }