"use client"

import * as React from "react"

import { cn } from "../../lib/utils"

/**
 * `Elevation` is replacement for `@wordpress/components`' `__experimentalElevation` -
 * **40 sites across 40 files, every one of them `<Elevation value={5} />`**.
 * (A raw grep says 42; two of those are inside commented-out blocks. The live count is 40.)
 *
 * It is not a container. It is an absolutely-positioned, pointer-transparent overlay that a card-like
 * parent stretches behind itself purely to cast a shadow, which is why dropping it would quietly
 * flatten forty surfaces rather than break anything visibly.
 *
 * Reproduced from WP's own source, not eyeballed
 * `build/elevation/styles.js` -> background: transparent; display: block; margin: 0 !important;
 * pointer-events: none; position: absolute; will-change: box-shadow
 * `build/elevation/hook.js` -> borderRadius: 'inherit' (default), inset = `offset` (default 0),
 * opacity: CONFIG.elevationIntensity (**1**), aria-hidden: true,
 * and a motion-safe `box-shadow 200ms cubic-bezier(.08,.52,.52,1)`
 * `getBoxShadow(value)` -> `0 ${value}px ${value * 2}px 0 rgba(0, 0, 0, ${value / 20})`
 *
 * at `value={5}`, the only value in our tree: **`0 5px 10px 0 rgba(0, 0, 0, 0.25)`**.
 *
 * The shadow is COMPUTED here rather than hardcoded, even though every call site passes 5. Hardcoding
 * would make `value` a lie - a prop that looks like it does something and does not - and the formula is
 * one line. `hover`, `active`, `focus` and `isInteractive` are NOT reproduced: nothing passes them, and
 * WP only emits those rules when they are defined, so their absence is faithful rather than a gap.
 *
 * `margin: 0 !important` is WP's, and it is kept. The overlay is absolutely positioned, so a stray
 * inherited margin would offset the shadow from the box it belongs to.
 */

export interface ElevationProps extends React.ComponentProps<"div"> {
  /** WP's elevation scale. Drives both the shadow geometry and its opacity. */
  value?: number
  /** Inset from the parent's edges. WP's default is 0, i.e. the overlay fills the parent exactly. */
  offset?: number
  /** WP defaults this to `inherit` so the shadow follows the parent's rounding. */
  borderRadius?: React.CSSProperties["borderRadius"]
}

/** WP's `getBoxShadow`, verbatim. */
export function getBoxShadow(value: number): string {
  return `0 ${value}px ${value * 2}px 0 rgba(0, 0, 0, ${value / 20})`
}

function Elevation({
  value = 0,
  offset = 0,
  borderRadius = "inherit",
  className,
  style,
  ...props
}: ElevationProps) {
  return (
    <div
      data-slot="elevation"
      // WP sets this, and it matters: the overlay is decorative and must not be announced.
      aria-hidden
      className={cn(
        "pointer-events-none absolute block bg-transparent will-change-[box-shadow]",
        "motion-safe:transition-[box-shadow] motion-safe:duration-200",
        className
      )}
      style={{
        borderRadius,
        top: offset,
        right: offset,
        bottom: offset,
        left: offset,
        boxShadow: getBoxShadow(value),
        // CONFIG.elevationIntensity is 1 in the version we ship; carried explicitly so the value is
        // visible here rather than implied by its absence.
        opacity: 1,
        margin: 0,
        ...style,
      }}
      {...props}
    />
  )
}

export { Elevation }