import { ViewStyle, TextStyle } from 'react-native';

import { textPresets } from '~/components/text';
import { color, spacing, typography } from '~/theme';

export type TwoLinesTextPresets = 'list-item' | 'item-list';

const BASE_VIEW = {
  paddingHorizontal: spacing[5] - spacing[1],
  paddingVertical: spacing[3],
} as ViewStyle;

/**
 * All the variations of component view styling.
 */
export const viewPresets: Record<TwoLinesTextPresets, ViewStyle> = {
  'list-item': {
    ...BASE_VIEW,
  } as ViewStyle,
  'item-list': {
    ...BASE_VIEW,
  } as ViewStyle,
};

export const titlePresets: Record<TwoLinesTextPresets, TextStyle> = {
  'list-item': {
    ...textPresets.body2,
    color: color.dim,
  } as TextStyle,
  'item-list': {
    ...textPresets.subtitle1,
    fontWeight: typography.fontWeight.medium,
    color: color.text,
  } as TextStyle,
};

export const subtitlePresets: Record<TwoLinesTextPresets, TextStyle> = {
  'list-item': {
    ...textPresets.subtitle1,
    fontWeight: typography.fontWeight.medium,
    color: color.dim,
  } as TextStyle,
  'item-list': {
    ...textPresets.caption,
    color: color.palette.gray,
  } as TextStyle,
};
