'use client';

import * as React from 'react';
import * as SwitchPrimitive from 'radix-ui/switch';

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

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

const switchVariants = cva(
  cn(
    'peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs',
    /* The track's own four: the fill, the focus ring, the ring's border and the
       disabled fade. `transform` is deliberately absent — the thumb travels,
       not the track, and it carries its own `transition-transform` below. */
    'transition-[background-color,border-color,box-shadow,opacity] duration-(--ui-duration-fast) ease-(--ui-ease-standard)',
    'data-[state=checked]:bg-(--ctl-solid) data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80',
    focusRing,
    disabledField
  ),
  {
    variants: {
      colorPalette: colorPalettes,
      /* CBAR's track is always 2:1 — 32×16, 40×20, 48×24. It skips `sm`, which
         is interpolated here at 36×18 so the kit's size vocabulary stays whole. */
      size: {
        xs: 'h-4 w-8',
        sm: 'h-[1.125rem] w-9',
        md: 'h-5 w-10',
        lg: 'h-6 w-12',
      },
    },
    defaultVariants: { colorPalette: 'primary', size: 'md' },
  }
);

export interface SwitchProps
  extends React.ComponentProps<typeof SwitchPrimitive.Root>,
    VariantProps<typeof switchVariants> {}

/**
 * On/off toggle that applies immediately.
 *
 * Use it for settings that take effect on change; if the choice only takes
 * effect after a Save button, use a Checkbox instead.
 */
function Switch({ className, colorPalette, size = 'md', ...props }: SwitchProps) {
  return (
    <SwitchPrimitive.Root
      data-slot="switch"
      data-size={size}
      className={cn(switchVariants({ colorPalette, size }), className)}
      {...props}
    >
      <SwitchPrimitive.Thumb
        data-slot="switch-thumb"
        className={cn(
          /* The thumb is inset 2px on every size, so it is the track height
             less 4px and travels the track width less its own width. */
          'pointer-events-none block rounded-full bg-background ring-0 transition-transform',
          'group-data-[size=xs]/switch:size-3 group-data-[size=sm]/switch:size-3.5',
          'group-data-[size=md]/switch:size-4 group-data-[size=lg]/switch:size-5',
          'ml-0.5 data-[state=checked]:translate-x-full data-[state=unchecked]:translate-x-0',
          'dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground'
        )}
      />
    </SwitchPrimitive.Root>
  );
}

export { Switch };