import { Platform } from 'react-native';
import { cva, type VariantProps } from 'class-variance-authority';
import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';

export const quickActionButtonRootVariants = cva([
  'flex flex-col items-center gap-2',
  'min-w-[60px] max-w-20',
  'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
  DISABLED_CURSOR,
]);

export const quickActionButtonIndicatorVariants = cva([
  'flex items-center justify-center shrink-0',
  'h-[60px] w-[60px] min-h-[60px] min-w-[60px] p-2',
  'rounded-[var(--border-radius-round)]',
  'border border-stroke-secondary',
  'bg-surface-primary',
  'overflow-hidden',
  TRANSITION_COLORS,
  'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
  Platform.select({
    default: 'data-[active=true]:bg-surface-primary-active',
    web: [
      'data-[hover=true]:bg-surface-primary-hover',
      'data-[active=true]:data-[hover=true]:bg-surface-secondary-active',
      'web:data-[focus-visible=true]:ring-2',
      'web:data-[focus-visible=true]:ring-[var(--color-stroke-ring)]',
      'web:data-[focus-visible=true]:ring-offset-2',
    ].join(' '),
  }),
]);

export const quickActionButtonGlyphVariants = cva(['size-6', 'text-content-action']);

export const quickActionButtonLabelVariants = cva([
  'body-sm font-medium',
  'text-content-primary text-center',
  'w-full min-w-0 max-w-20 self-center',
  'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
]);

export type QuickActionButtonVariantProps = VariantProps<typeof quickActionButtonRootVariants>;