"use client"

import * as React from "react"

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

/**
 * `Disabled` makes its whole subtree non-interactive. replacement for
 * `@wordpress/components`' `<Disabled>`, which 29 files use - 98 of the 109 call sites as
 * `isDisabled={isPatient}`, i.e. "the patient is reading their own chart and must not edit it".
 *
 * THIS IS BEHAVIOUR, NOT STYLING. If this only dimmed its children, every one of those fields
 * would still be editable and the server would be the only thing saying no. Do not "simplify" it
 * into an opacity class.
 *
 * `isDisabled` DEFAULTS TO TRUE, deliberately, matching WP. Six call sites are a bare
 * `<Disabled>` meaning "always disabled"; defaulting to false would silently make those six clinical
 * fields editable. Pinned by two tests (`undefined` and omitted both mean DISABLED).
 *
 * Mechanism, and why this one
 * The native `inert` attribute, exactly as WP does it: it removes the subtree from the tab order and
 * blocks pointer/keyboard interaction at the platform level, which is what "genuinely disabled"
 * means. It is paired with WP's own CSS (`pointer-events: none` on the wrapper AND descendants, plus
 * a transparent `::after` overlay) so the block still holds in browsers without `inert` support -
 * a gap WP's own docs call out and answer with a polyfill recommendation.
 *
 * A `<div>` wrapper is deliberate. `<fieldset disabled>` would also disable descendant form
 * controls natively, but fieldset's `min-inline-size: min-content` quirk breaks flex and grid
 * children, and these 29 files are dense clinical layouts. Same DOM shape as WP no layout change.
 *
 * Note for anyone writing tests against this: **jsdom enforces neither `inert` nor
 * `fieldset[disabled]`** (measured, not assumed - a click on a descendant still reaches its handler).
 * The unit tests therefore pin the discriminator, and the behavioural proof is taken in a real
 * browser. See `__tests__/disabled.test.tsx`.
 */
function Disabled({
  isDisabled = true,
  className,
  children,
  ...props
}: React.ComponentProps<"div"> & { isDisabled?: boolean }) {
  // React 18's DOM typings predate `inert`, and it must be ABSENT rather than "false" when enabled -
  // any present value would disable the subtree.
  const inertAttr = (isDisabled ? { inert: "" } : {}) as Record<string, unknown>

  return (
    <div
      data-slot="disabled"
      {...inertAttr}
      className={cn(
        isDisabled &&
          // WP parity, and deliberately NO dimming - WP's Disabled does not change opacity, so the
          // 29 conversions must not either. The::after overlay catches clicks that would otherwise
          // land on a child whose own CSS re-enables pointer events.
          "relative pointer-events-none [&_*]:pointer-events-none after:absolute after:inset-0 after:content-['']",
        className,
      )}
      {...props}
    >
      {children}
    </div>
  )
}

export { Disabled }