'use client';

import * as React from 'react';
import { CheckIcon } from '@/icons';
import * as CheckboxPrimitive from 'radix-ui/checkbox';

import { cva, type VariantProps } from '@/lib/cva';

import { cn } from '@/lib/utils';
import { colorPalettes, disabledField, focusRing, invalidState } from '@/lib/cva-presets';

const checkboxVariants = cva(
  cn(
    /* Unchecked is a white box with a hairline border; checked fills solid in
       the active palette. Straight from CBAR's Checkmark component set. */
    'peer shrink-0 border border-input bg-background shadow-xs dark:bg-input/30',
    'transition-shadow duration-(--ui-duration-fast) ease-(--ui-ease-standard)',
    'data-[state=checked]:border-transparent data-[state=checked]:bg-(--ctl-solid) data-[state=checked]:text-(--ctl-solid-fg)',
    'data-[state=indeterminate]:border-transparent data-[state=indeterminate]:bg-(--ctl-solid) data-[state=indeterminate]:text-(--ctl-solid-fg)',
    focusRing,
    disabledField,
    invalidState
  ),
  {
    variants: {
      colorPalette: colorPalettes,
      size: {
        /* CBAR rounds the smallest box tighter — 2px against 4px — because a
           4px radius on a 12px box reads as a circle. */
        xs: 'size-3 rounded-2xs [&_svg]:size-2.5',
        sm: 'size-4 rounded-xs [&_svg]:size-3',
        md: 'size-5 rounded-xs [&_svg]:size-3.5',
        lg: 'size-6 rounded-xs [&_svg]:size-4',
      },
    },
    defaultVariants: { colorPalette: 'primary', size: 'sm' },
  }
);

export interface CheckboxProps
  extends React.ComponentProps<typeof CheckboxPrimitive.Root>,
    VariantProps<typeof checkboxVariants> {}

/**
 * Binary toggle for a form. Supports an `indeterminate` checked value for
 * "some of the children are selected" cases.
 */
function Checkbox({ className, colorPalette, size, ...props }: CheckboxProps) {
  return (
    <CheckboxPrimitive.Root
      data-slot="checkbox"
      className={cn(checkboxVariants({ colorPalette, size }), className)}
      {...props}
    >
      <CheckboxPrimitive.Indicator
        data-slot="checkbox-indicator"
        className="grid place-content-center text-current transition-none"
      >
        {props.checked === 'indeterminate' ? (
          <span aria-hidden className="block h-0.5 w-2.5 rounded-full bg-current" />
        ) : (
          <CheckIcon />
        )}
      </CheckboxPrimitive.Indicator>
    </CheckboxPrimitive.Root>
  );
}

export { Checkbox };