import { StyleSheet } from 'react-native';
import { tv } from '../../helpers/external/utils/cn';
import { combineStyles } from '../../helpers/internal/utils';

/**
 * Root style definition
 *
 * @note ANIMATED PROPERTIES (cannot be set via className):
 * The following properties are animated and cannot be overridden using Tailwind classes:
 * - `backgroundColor` - Animated for selection transitions (unselected: default, selected: accent)
 * - `transform` (specifically `scale`) - Animated for press feedback transitions (unpressed: 1, pressed: 0.96)
 *
 * To customize these properties, use the `animation` prop on `Switch`:
 * ```tsx
 * <Switch
 *   animation={{
 *     backgroundColor: { value: ['#e5e5e5', '#007AFF'], timingConfig: { duration: 175 } },
 *     scale: { value: [1, 0.96], timingConfig: { duration: 150 } }
 *   }}
 * />
 * ```
 *
 * To completely disable animated styles and apply your own via className or style prop,
 * set `isAnimatedStyleActive={false}` on `Switch`.
 */
const root = tv({
  base: 'switch__root',
  variants: {
    isDisabled: {
      true: 'disabled:element-disabled',
      false: '',
    },
  },
  defaultVariants: {
    isDisabled: false,
  },
});

/**
 * Thumb style definition
 *
 * @note ANIMATED PROPERTIES (cannot be set via className):
 * The following properties are animated and cannot be overridden using Tailwind classes:
 * - `left` - Animated for thumb position transitions (unselected: left edge offset, selected: right edge offset)
 * - `backgroundColor` - Animated for selection transitions (unselected: white, selected: accent-foreground)
 *
 * To customize these properties, use the `animation` prop on `Switch.Thumb`:
 * ```tsx
 * <Switch.Thumb
 *   animation={{
 *     left: { value: 2, springConfig: { damping: 120, stiffness: 1600, mass: 2 } },
 *     backgroundColor: { value: ['white', '#ffffff'], timingConfig: { duration: 175 } }
 *   }}
 * />
 * ```
 *
 * To completely disable animated styles and apply your own via className or style prop,
 * set `isAnimatedStyleActive={false}` on `Switch.Thumb`.
 */
const thumb = tv({
  base: 'switch__thumb',
});

/**
 * Switch background style definition — generic absolute-fill container
 * behind the switch content (clipped by the root's `overflow: hidden`),
 * hosting theme-specific layers (e.g. a glass blur layer).
 */
const background = tv({
  base: 'switch__background',
});

const startContent = tv({
  base: 'switch__start-content',
});

const endContent = tv({
  base: 'switch__end-content',
});

export const switchClassNames = combineStyles({
  root,
  background,
  thumb,
  startContent,
  endContent,
});

export const switchStyleSheet = StyleSheet.create({
  borderCurve: {
    borderCurve: 'continuous',
  },
});