Checkbox

import { css, on, ref, type Handle, type Props } from 'remix/component'

import { CheckIcon } from './icons.tsx'

export type CheckedState = boolean | 'indeterminate'

export interface CheckboxProps extends Omit<Props<'button'>, 'value' | 'type'> {
  /** Controlled checked state. */
  checked?: CheckedState
  /** Initial checked state when uncontrolled. */
  defaultChecked?: CheckedState
  onCheckedChange?: (checked: CheckedState) => void
  required?: boolean
  /** Value submitted with the form when checked. */
  value?: string
}

const checkboxStyles = css({
  width: '1rem',
  height: '1rem',
  flexShrink: 0,
  borderRadius: '4px',
  borderWidth: '1px',
  borderColor: 'var(--input)',
  '--tw-shadow': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
  boxShadow: 'var(--tw-ring-shadow), var(--tw-shadow)',
  transitionProperty: 'box-shadow',
  transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
  transitionDuration: '150ms',
  outlineStyle: 'none',
  '.dark &': { backgroundColor: 'color-mix(in oklab, var(--input) 30%, transparent)' },
  '&:focus-visible': {
    borderColor: 'var(--ring)',
    '--tw-ring-shadow':
      '0 0 0 3px var(--tw-ring-color, color-mix(in oklab, var(--ring) 50%, transparent))',
  },
  '&:disabled': { cursor: 'not-allowed', opacity: 0.5 },
  '&[aria-invalid="true"]': {
    borderColor: 'var(--destructive)',
    '--tw-ring-color': 'color-mix(in oklab, var(--destructive) 20%, transparent)',
  },
  '.dark &[aria-invalid="true"]': {
    '--tw-ring-color': 'color-mix(in oklab, var(--destructive) 40%, transparent)',
  },
  '&[data-state="checked"]': {
    borderColor: 'var(--primary)',
    backgroundColor: 'var(--primary)',
    color: 'var(--primary-foreground)',
  },
  '.dark &[data-state="checked"]': { backgroundColor: 'var(--primary)' },
})

const indicatorStyles = css({
  display: 'grid',
  placeContent: 'center',
  color: 'currentcolor',
  transitionProperty: 'none',
  pointerEvents: 'none',
})

const iconStyles = css({ width: '0.875rem', height: '0.875rem' })

/** The visually hidden native input that lets the checkbox take part in form submission. */
const bubbleInputStyles = css({
  position: 'absolute',
  transform: 'translateX(-100%)',
  pointerEvents: 'none',
  opacity: 0,
  margin: 0,
})

/**
 * A control that allows the user to toggle between checked and not checked. Renders a
 * `<button role="checkbox">`; when it belongs to a form, a hidden native checkbox mirrors its
 * state so `name`/`value`/`required` work with native form submission and validation.
 */
export function Checkbox(handle: Handle<CheckboxProps>) {
  let uncontrolled: CheckedState = handle.props.defaultChecked ?? false
  let initial = uncontrolled
  let isFormControl = true
  let bubbleInput: HTMLInputElement | undefined

  let current = () => handle.props.checked ?? uncontrolled

  async function setChecked(next: CheckedState) {
    if (handle.props.checked === undefined) uncontrolled = next
    handle.props.onCheckedChange?.(next)
    await handle.update()
    // Let form-level listeners observe the change like a native checkbox.
    bubbleInput?.dispatchEvent(new Event('input', { bubbles: true }))
    bubbleInput?.dispatchEvent(new Event('change', { bubbles: true }))
  }

  return () => {
    let {
      checked: _checked,
      defaultChecked: _defaultChecked,
      onCheckedChange: _onCheckedChange,
      required,
      name,
      value = 'on',
      disabled,
      form,
      mix,
      ...props
    } = handle.props
    let checked = current()
    let state = checked === 'indeterminate' ? 'indeterminate' : checked ? 'checked' : 'unchecked'

    handle.queueTask(() => {
      if (bubbleInput) bubbleInput.indeterminate = checked === 'indeterminate'
    })

    return (
      <>
        <button
          type="button"
          role="checkbox"
          aria-checked={checked === 'indeterminate' ? 'mixed' : checked}
          aria-required={required}
          data-state={state}
          data-disabled={disabled ? '' : undefined}
          disabled={disabled}
          value={value}
          form={form}
          data-slot="checkbox"
          class="peer"
          {...props}
          mix={[
            checkboxStyles,
            ref((node, signal) => {
              let owner = node.form
              if (!owner) {
                isFormControl = false
                queueMicrotask(() => handle.update())
                return
              }
              owner.addEventListener('reset', () => setChecked(initial), { signal })
            }),
            on('keydown', (event) => {
              // WAI-ARIA: checkboxes don't activate on Enter.
              if (event.key === 'Enter') event.preventDefault()
            }),
            on('click', () => {
              setChecked(current() === 'indeterminate' ? true : !current())
            }),
            mix,
          ]}
        >
          {checked !== false && (
            <span
              data-slot="checkbox-indicator"
              data-state={state}
              data-disabled={disabled ? '' : undefined}
              mix={indicatorStyles}
            >
              <CheckIcon mix={iconStyles} />
            </span>
          )}
        </button>
        {isFormControl && (
          <input
            type="checkbox"
            aria-hidden="true"
            tabIndex={-1}
            name={name}
            value={value}
            checked={checked === true}
            required={required}
            disabled={disabled}
            form={form}
            mix={[
              bubbleInputStyles,
              ref((node) => {
                bubbleInput = node
                let control = node.previousElementSibling as HTMLElement | null
                if (control) {
                  // `important` so layout rules like Field's `[&>*]:w-full` can't resize it.
                  node.style.setProperty('width', `${control.offsetWidth}px`, 'important')
                  node.style.setProperty('height', `${control.offsetHeight}px`, 'important')
                }
                node.indeterminate = current() === 'indeterminate'
              }),
            ]}
          />
        )}
      </>
    )
  }
}