'use client';

import * as React from 'react';
import * as RadioGroupPrimitive from 'radix-ui/radio-group';
import { cva, type VariantProps } from '@/lib/cva';

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

const radioItemVariants = cva(
  cn(
    'aspect-square shrink-0 rounded-full border border-input bg-background shadow-xs dark:bg-input/30',
    'transition-[border-color,border-width,box-shadow] duration-(--ui-duration-fast) ease-(--ui-ease-standard)',
    /* CBAR draws the selected state as a thick ring rather than a dot in the
       middle: the border swells and the untouched centre becomes the dot. That
       is why there is no indicator element to colour here. */
    'data-[state=checked]:border-(--ctl-solid)',
    focusRing,
    disabledField,
    invalidState
  ),
  {
    variants: {
      colorPalette: colorPalettes,
      size: {
        xs: 'size-3 data-[state=checked]:border-[3px]',
        sm: 'size-4 data-[state=checked]:border-4',
        md: 'size-5 data-[state=checked]:border-[6px]',
        lg: 'size-6 data-[state=checked]:border-[7px]',
      },
    },
    defaultVariants: { colorPalette: 'primary', size: 'sm' },
  }
);

export type RadioGroupProps = React.ComponentProps<typeof RadioGroupPrimitive.Root>;

export interface RadioGroupItemProps
  extends React.ComponentProps<typeof RadioGroupPrimitive.Item>,
    VariantProps<typeof radioItemVariants> {}

/**
 * Mutually exclusive choice. Arrow keys move between options — that is the
 * expected behaviour for a radio group, and why it is not a set of checkboxes.
 */
function RadioGroup({ className, ...props }: RadioGroupProps) {
  return (
    <RadioGroupPrimitive.Root
      data-slot="radio-group"
      className={cn('grid gap-3', className)}
      {...props}
    />
  );
}

function RadioGroupItem({ className, colorPalette, size, ...props }: RadioGroupItemProps) {
  return (
    <RadioGroupPrimitive.Item
      data-slot="radio-group-item"
      className={cn(radioItemVariants({ colorPalette, size }), className)}
      {...props}
    >
      {/* Radix still needs an Indicator to drive `data-state`, but CBAR's mark
          is the border itself, so this one renders nothing. */}
      <RadioGroupPrimitive.Indicator data-slot="radio-group-indicator" />
    </RadioGroupPrimitive.Item>
  );
}

export { RadioGroup, RadioGroupItem };