"use client"

import * as React from "react"
import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"

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

/**
 * `ToggleGroupControl` and `ToggleGroupControlOption` replace
 * `@wordpress/components`' `__experimentalToggleGroupControl` / `...Option` - **1 import**, two
 * usages in `QuestionnairePage`, built on Radix's ToggleGroup.
 *
 * AN ADAPTER, NOT A RENAME, AND THE ONE THAT WOULD HAVE BITTEN IS DESELECTION. A Radix single
 * ToggleGroup lets you click the ACTIVE item to turn it off, and reports `""`. WordPress's control
 * does not - the current segment stays chosen. Passing that `""` through would set
 * `segment` to an empty string and the page would render neither the details tab nor the items tab.
 * The empty value is swallowed here, which is what keeps the swap safe.
 *
 * `onChange` hands back the VALUE, which is both WP's contract and Radix's, so the two call sites
 * (`setSegment` and a react-hook-form `field.onChange`) survive untouched.
 *
 * `isBlock` is WP's "share the width equally". Options always flex; `isBlock` is what makes the
 * track full width rather than content width.
 *
 * `__nextHasNoMarginBottom` and `__next40pxDefaultSize` are deliberately not accepted. Call sites
 * drop them.
 */

export interface ToggleGroupControlProps {
  label?: React.ReactNode
  help?: React.ReactNode
  value?: string
  /** WP's contract: the VALUE. Never fires with an empty string. */
  onChange?: (value: string) => void
  /** Fill the available width and share it between the options. */
  isBlock?: boolean
  disabled?: boolean
  className?: string
  children: React.ReactNode
}

function ToggleGroupControl({
  label,
  help,
  value,
  onChange,
  isBlock = false,
  disabled,
  className,
  children,
}: ToggleGroupControlProps) {
  // The group is labelled by its own text rather than a `<label for=...>`: there is no single input
  // to point at, so a screen reader needs the association through `aria-labelledby`.
  const generated = React.useId().replace(/:/g, "")
  const labelId = label ? `toggle-group-control-${generated}-label` : undefined
  const helpId = help ? `toggle-group-control-${generated}-help` : undefined

  return (
    <div data-slot="toggle-group-control" className="w-full">
      {label && (
        <span
          id={labelId}
          data-slot="toggle-group-control-label"
          className="mb-1 block text-sm font-medium"
        >
          {label}
        </span>
      )}

      <ToggleGroupPrimitive.Root
        type="single"
        value={value}
        disabled={disabled}
        aria-labelledby={labelId}
        aria-describedby={helpId}
        onValueChange={(next) => {
          // Radix reports "" when the active item is clicked again. WordPress has no such state.
          if (next) onChange?.(next)
        }}
        className={cn(
          "bg-muted inline-flex items-center gap-0.5 rounded-md p-0.5",
          isBlock ? "w-full" : "w-fit",
          className
        )}
      >
        {children}
      </ToggleGroupPrimitive.Root>

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

export interface ToggleGroupControlOptionProps {
  value: string
  label: React.ReactNode
  disabled?: boolean
  className?: string
}

function ToggleGroupControlOption({
  value,
  label,
  disabled,
  className,
}: ToggleGroupControlOptionProps) {
  return (
    <ToggleGroupPrimitive.Item
      data-slot="toggle-group-control-option"
      value={value}
      disabled={disabled}
      className={cn(
        "text-ink-muted focus-visible:ring-ring flex-1 rounded px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2",
        // The chosen segment takes the primary fill: white on the near-white track could hardly be told apart.
        "data-[state=on]:bg-primary data-[state=on]:text-primary-foreground data-[state=on]:shadow-sm",
        "disabled:pointer-events-none disabled:opacity-50",
        className
      )}
    >
      {label}
    </ToggleGroupPrimitive.Item>
  )
}

export { ToggleGroupControl, ToggleGroupControlOption }