"use client"

import * as React from "react"
import { Popover as PopoverPrimitive } 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/tooltip`. See
// `lib/stackingLayers.ts`.
import { Z_POPOVER_CLASS } from "../../lib/stackingLayers"

/**
 * The ui/* replacement for `@wordpress/components`' `Popover` - **1 import**, built on Radix.
 *
 * THIS ONE IS NOT A MECHANICAL SWAP, AND THE FAILURE IS SILENT. WordPress's legacy `<Popover>` takes
 * its anchor from WHERE IT IS MOUNTED, so the existing call site renders it inside the button it
 * belongs to and toggles it with its own state:
 *
 * {visible && <Popover><div>...</div></Popover>}
 *
 * Radix needs a Root that owns the open state and a Trigger or Anchor to position against. Importing
 * `Popover` from here and leaving that JSX alone TYPECHECKS - `Popover` is the Root - and renders
 * NOTHING, because there is no Content inside it. The call site has to be restructured:
 *
 * <Popover open={visible} onOpenChange={setVisible}>
 * <PopoverTrigger asChild><button...>...</button></PopoverTrigger>
 * <PopoverContent>...</PopoverContent>
 * </Popover>
 *
 * That also lifts the bubble out of the `<button>` it is currently nested inside, which is what let
 * a click on the help text re-toggle the button.
 */

function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
  return <PopoverPrimitive.Root data-slot="popover" {...props} />
}

function PopoverTrigger({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
}

/** Positions the content against something other than the trigger. */
function PopoverAnchor({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
}

function PopoverContent({
  className,
  align = "center",
  sideOffset = 4,
  container,
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Content> & {
  container?: HTMLElement | null
}) {
  return (
    <PopoverPrimitive.Portal container={container ?? getAkashicPortalContainer()}>
      <PopoverPrimitive.Content
        data-slot="popover-content"
        align={align}
        sideOffset={sideOffset}
        className={cn(
          Z_POPOVER_CLASS,
          "bg-popover text-popover-foreground border-border w-72 rounded-md border p-4 shadow-md outline-none",
          "animate-in fade-in-0 zoom-in-95",
          className
        )}
        {...props}
      />
    </PopoverPrimitive.Portal>
  )
}

export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger }