import { cva, type VariantProps } from 'class-variance-authority';

// =============================================================================
// NATIVE — Uniwind className bindings for RN Switch
// =============================================================================

export const switchThumbColorVariants = cva(['accent-white'], {
  variants: {
    isDisabled: {
      true: 'accent-gray-200',
      false: '',
    },
  },
  defaultVariants: { isDisabled: false },
});

export const switchTrackOnVariants = cva(['accent-blue-500'], {
  variants: {
    isInvalid: {
      true: 'accent-red-500',
      false: '',
    },
  },
  defaultVariants: { isInvalid: false },
});

export const switchTrackOffVariants = cva(['accent-gray-300'], {
  variants: {
    isInvalid: {
      true: 'accent-red-300',
      false: '',
    },
  },
  defaultVariants: { isInvalid: false },
});

export const switchIosBgVariants = cva(['accent-gray-300'], {
  variants: {
    isInvalid: {
      true: 'accent-red-300',
      false: '',
    },
  },
  defaultVariants: { isInvalid: false },
});

// =============================================================================
// WEB — Tailwind classes for custom Pressable toggle
// =============================================================================

export const switchTrackVariants = cva(
  [
    'flex-row items-center rounded-full cursor-pointer',
    'transition-colors duration-200',
    'data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed',
    'web:data-[focus-visible=true]:ring-3 web:data-[focus-visible=true]:ring-blue-300/50',
    'web:data-[invalid=true]:data-[focus-visible=true]:ring-red-300/50',
  ],
  {
    variants: {
      size: {
        sm: 'w-9 h-5 p-0.5',
        md: 'w-11 h-6 p-0.5',
        lg: 'w-14 h-8 p-1',
      },
    },
    defaultVariants: {
      size: 'md',
    },
  },
);

export const switchWebTrackColorVariants = cva([], {
  variants: {
    isChecked: {
      true: 'bg-blue-500 data-[hover=true]:bg-blue-600',
      false: 'bg-gray-300 data-[hover=true]:bg-gray-400',
    },
    isInvalid: {
      true: '',
      false: '',
    },
  },
  compoundVariants: [
    { isChecked: true, isInvalid: true, className: 'bg-red-500 data-[hover=true]:bg-red-600' },
    { isChecked: false, isInvalid: true, className: 'bg-red-300 data-[hover=true]:bg-red-400' },
  ],
  defaultVariants: {
    isChecked: false,
    isInvalid: false,
  },
});

export const switchThumbVariants = cva(
  ['rounded-full bg-white shadow-sm', 'transition-transform duration-200'],
  {
    variants: {
      size: {
        sm: 'w-4 h-4',
        md: 'w-5 h-5',
        lg: 'w-6 h-6',
      },
      isChecked: {
        true: '',
        false: 'translate-x-0',
      },
    },
    compoundVariants: [
      { size: 'sm', isChecked: true, className: 'translate-x-4' },
      { size: 'md', isChecked: true, className: 'translate-x-5' },
      { size: 'lg', isChecked: true, className: 'translate-x-6' },
    ],
    defaultVariants: {
      size: 'md',
      isChecked: false,
    },
  },
);

export type SwitchVariantProps = VariantProps<typeof switchTrackVariants>;