import type { ReactNode } from 'react'
import { Checkbox } from '@/components/ui/checkbox'
import { Switch } from '@/components/ui/switch'
import styles from './Check.module.css'

/*
The checkbox with its label and help. It was written three times (Settings, DHCP
and Administration), byte for byte identical apart from the styles module.

And it brings the **switch**, which is the only gesture of its own this console has
allowed itself. A yes/no setting is not the same as ticking a table row: the first
changes how the server behaves and stays that way, the second is a selection that
lasts one click. Upstream paints them the same because Bootstrap 3 only had a
checkbox. Here the setting gets a switch and the selection stays a checkbox, which
is the difference the shape had to say and was not saying.

Underneath it is still an `input[type=checkbox]`: same keyboard, same role, same
tests. What changes is what you see.
*/

export function Check({
  label,
  checked,
  onChange,
  help,
  disabled,
  toggle = false,
}: {
  label: string
  checked: boolean
  onChange: (v: boolean) => void
  help?: ReactNode
  disabled?: boolean
  /** A setting that stays put. False for a row selection. */
  toggle?: boolean
}) {
  const common = {
    checked,
    disabled,
    'aria-label': label,
    onCheckedChange: (v: boolean) => onChange(v),
  }
  return (
    <div>
      <div className={styles.check}>
        {/* The control carries the name itself and the text beside it only forwards the
            click: a wrapping <label> would name the hidden input as well, and the one
            control would be found twice. A switch is announced as a checkbox on
            purpose: same role, same keyboard as the input it replaces. */}
        {toggle ? (
          <Switch role="checkbox" nativeButton render={<button type="button" />} {...common} />
        ) : (
          <Checkbox nativeButton render={<button type="button" />} {...common} />
        )}
        <span className={styles.text} onClick={() => !disabled && onChange(!checked)}>
          {label}
        </span>
      </div>
      {help && <div className={styles.help}>{help}</div>}
    </div>
  )
}