import * as React from 'react'
import * as RCheckbox from '@radix-ui/react-checkbox'
import { cn } from './cva'
import { useFieldControl } from './Field'

export interface CheckboxProps {
  checked?: boolean | 'indeterminate'
  defaultChecked?: boolean
  onCheckedChange?(v: boolean | 'indeterminate'): void
  disabled?: boolean
  id?: string
  'aria-label'?: string
  'aria-describedby'?: string
  className?: string
}

export const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
  ({ id, className, ...props }, ref) => {
    const field = useFieldControl()
    return (
      <RCheckbox.Root
        ref={ref}
        id={id ?? field?.id}
        aria-describedby={props['aria-describedby'] ?? field?.describedBy}
        className={cn(
          'inline-flex h-[var(--mod-touch-min)] w-[var(--mod-touch-min)] items-center justify-center rounded-sm border border-border bg-surface text-[var(--mod-color-accent-contrast)] focus-visible:outline-[var(--mod-focus-ring-width)] focus-visible:outline-[var(--mod-focus-ring-color)] focus-visible:outline-offset-[var(--mod-focus-ring-offset)] disabled:cursor-not-allowed disabled:opacity-[var(--mod-opacity-disabled)] data-[state=checked]:border-[var(--mod-color-accent-9)] data-[state=checked]:bg-[var(--mod-color-accent-9)] data-[state=checked]:hover:bg-[var(--mod-color-accent-10)] data-[state=checked]:active:bg-[var(--mod-color-accent-11)] data-[state=indeterminate]:border-[var(--mod-color-accent-9)] data-[state=indeterminate]:bg-[var(--mod-color-accent-9)]',
          className,
        )}
        {...props}
      >
        <RCheckbox.Indicator>
          <svg viewBox="0 0 16 16" className="h-3 w-3" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M3 8l3.5 3.5L13 4" />
          </svg>
        </RCheckbox.Indicator>
      </RCheckbox.Root>
    )
  },
)
Checkbox.displayName = 'Checkbox'