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

export const tileGroupVariants = cva(['flex w-full'], {
  variants: {
    direction: {
      column: 'flex-col',
      row: 'flex-row',
    },
    spacing: {
      default: 'gap-2',
      none: 'gap-0',
    },
  },
  defaultVariants: {
    direction: 'column',
    spacing: 'default',
  },
});

export type TileGroupVariantProps = VariantProps<typeof tileGroupVariants>;

export const tileRootVariants = cva(
  [
    'flex-row self-stretch gap-3 px-4 py-3',
    'data-[disabled=true]:opacity-50',
    TRANSITION_COLORS,
    Platform.select({
      web: [
        'outline-none',
        'data-[hover=true]:data-[disabled=false]:bg-surface-action-tint-hover',
        'data-[active=true]:data-[disabled=false]:data-[hover=true]:bg-surface-action-tint-active',
        'data-[hover=true]:data-[disabled=false]:data-[state=unselected]:border-stroke-action',
        'focus-visible:data-[disabled=false]:ring-2 focus-visible:data-[disabled=false]:ring-stroke-focus focus-visible:data-[disabled=false]:ring-offset-2',
      ].join(' '),
      default: [
        'data-[active=true]:bg-surface-action-tint-hover',
        'data-[active=true]:border-stroke-action',
      ].join(' '),
    }),
  ],
  {
    variants: {
      shape: {
        flat: 'rounded-none border-0 bg-transparent',
        card: [
          'rounded-[var(--border-radius-default)] border-1 border-solid',
          'border-stroke-secondary',
          'bg-surface-primary',
          'data-[state=selected]:border-stroke-action',
          'data-[state=selected]:border-1.5',
          'data-[state=selected]:bg-surface-action-tint',
        ].join(' '),
      },
      showSeparator: {
        true: [
          'border-b border-solid border-stroke-secondary! native:data-[active=true]:border-stroke-secondary', // Override border-stroke-action on hover
        ],
        false: '',
      },
    },
    defaultVariants: {
      shape: 'card',
      showSeparator: false,
    },
  },
);

export const tileLeadingSlotVariants = cva(['flex shrink-0 items-center justify-center']);

export const tileTrailingSlotVariants = cva(['flex shrink-0 items-center justify-center']);

export const tileContentVariants = cva(['min-w-0 flex-1 flex-col gap-0.5 no-underline']);

export const tileTitleVariants = cva(['text-base font-medium text-content-primary no-underline']);

export const tileDescriptionVariants = cva(['text-sm text-content-secondary no-underline']);

export const tileIndicatorVariants = cva(['flex shrink-0 items-center justify-center']);

export type TileVariantProps = VariantProps<typeof tileRootVariants>;