import {StyleSheet} from 'react-native';
import {TypographyVariant} from '@components/_core/Typography';
import {NewThemeColors, ThemeColors} from '@shared/theme';

import {TitleVariant} from './interfaces';

export const getTextColors = ({
  theme,
  disabled,
  variant,
}: {
  theme: ThemeColors & NewThemeColors;
  disabled?: boolean;
  variant?: TitleVariant;
}) => {
  const color = disabled
    ? theme.text.neutral.disabled
    : variant === 'white'
    ? theme.text.neutral.inverted
    : undefined;

  return {
    topText:
      color ||
      (variant === 'primaryTop'
        ? theme.text.neutral.brand
        : theme.text.neutral.lighter),
    title:
      color ||
      (variant === 'primaryTitle'
        ? theme.text.neutral.brand
        : theme.text.neutral.default),
    description: color || theme.text.neutral.lighter,
  };
};

export const TITLE_TEXT_VARIANTS: {
  [key: string]: {
    title: TypographyVariant;
    description: TypographyVariant;
    topText: TypographyVariant;
  };
} = {
  xl: {
    title: 'xl',
    description: 'm',
    topText: 's',
  },
  l: {
    title: 'l',
    description: 's',
    topText: 'xs',
  },
  m: {
    title: 'm',
    description: 'xs',
    topText: 'xxs',
  },
  s: {
    title: 's',
    description: 'xs',
    topText: 'xxs',
  },
  xs: {
    title: 'xs',
    description: 'xxs',
    topText: 'xxxs',
  },
};

export const styles = StyleSheet.create({
  center: {alignItems: 'center'},
  shrink: {flexShrink: 1},
});
