"use client"

import * as React from "react"

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

/**
 * `ToggleControl` is replacement for `@wordpress/components`' `ToggleControl` -
 * **46 live usages across 22 files**, the biggest single blocker left in the Radix sweep.
 *
 * **AN ADAPTER, NOT A RENAME - and the shape is `ui/input-control`, deliberately.** That
 * card proved the pattern: keep WP's prop contract so a conversion is a one-line import swap, and put the
 * translation in one place instead of at 22 call sites.
 *
 * The two props that make this an adapter rather than `ui/switch`
 * `label` (on essentially every call site) and `help` are rendered by WordPress and have no equivalent on
 * a bare switch. Reproducing them here is what keeps the conversion mechanical; pushing them out to the
 * call sites is how a design system grows 22 slightly different toggles.
 *
 * `onChange`, and why it is NOT renamed to Radix's `onCheckedChange`
 * WP hands the handler the **boolean**, and so does Radix - so unlike `InputControl` (where WP passed
 * the value and a native input passes the event) there is no translation to do. The prop keeps WP's NAME
 * purely so the call sites do not have to change:
 *
 * <ToggleControl label="Available" checked={field.value} onChange={field.onChange} />
 *
 * That is the react-hook-form shape almost every one of the 46 sites already uses, and `field.onChange`
 * takes the value directly - so it survives the swap untouched.
 *
 * `__nextHasNoMarginBottom` is deliberately NOT accepted
 * It appears on nearly every call site as WP's opt-in to the modern spacing, exactly as
 * `__next40pxDefaultSize` did for `InputControl`. It is meaningless outside WordPress, and
 * accepting-and-ignoring it would leave a dead WP-era prop on 46 sites for ever. **Call sites drop it**
 * - the same ruling made, for the same reason.
 */

export interface ToggleControlProps
  extends Omit<React.ComponentProps<typeof Switch>, "onChange" | "onCheckedChange"> {
  label?: React.ReactNode
  help?: React.ReactNode
  /** WP's contract, which happens to be Radix's too: the BOOLEAN, not an event. */
  onChange?: (checked: boolean) => void
}

function ToggleControl({
  label,
  help,
  className,
  onChange,
  id,
  checked,
  ...props
}: ToggleControlProps) {
  /*
 * A generated id is what lets the label be a real `<label for=...>` rather than a floating span - the
 * same reasoning as `ui/input-control`, and it matters more here: a switch with no associated label is
 * announced by a screen reader as an unnamed control semantics work.
 * `useId` emits colons, which are not valid in a CSS selector, so they are stripped - a test or a
 * `querySelector` keyed on the id would otherwise fail in a way that looks like the element is absent.
 */
  const generated = React.useId().replace(/:/g, "")
  const switchId = id ?? `toggle-control-${generated}`
  const helpId = help ? `${switchId}-help` : undefined

  // Form fields use undefined for off; preserve defaultChecked as the uncontrolled escape hatch.
  const controlled = props.defaultChecked === undefined ? { checked: checked ?? false } : { checked }

  return (
    <div data-slot="toggle-control" className="w-full">
      <div className="flex items-center gap-2">
        <Switch
          id={switchId}
          aria-describedby={helpId}
          className={cn(className)}
          onCheckedChange={onChange}
          {...controlled}
          {...props}
        />
        {label && (
          <label
            data-slot="toggle-control-label"
            htmlFor={switchId}
            className="text-sm font-medium select-none"
          >
            {label}
          </label>
        )}
      </div>

      {help && (
        <p
          data-slot="toggle-control-help"
          id={helpId}
          className="mt-1 text-sm text-muted-foreground"
        >
          {help}
        </p>
      )}
    </div>
  )
}

export { ToggleControl }