import {StyleSheet} from 'react-native';
import {COLORS} from '@shared/colors';
import {TYPOGRAPHY_STYLES} from '@components/_core/Typography/styles';

import {TextWeight} from './interfaces';

export const LEGACY_VARIANT_WEIGHT = {
  h1: TextWeight.bold,
  h2: TextWeight.bold,
  h3: TextWeight.bold,
  h4: TextWeight.bold,
  h5: TextWeight.bold,
  h6: TextWeight.bold,
  body1: TextWeight.regular,
  body2: TextWeight.regular,
  body3: TextWeight.regular,
  subtitle1: TextWeight.medium,
  subtitle2: TextWeight.medium,
  overline: TextWeight.medium,
  caption: TextWeight.medium,
  error: TextWeight.regular,
  helper: TextWeight.regular,
  xxxs: null,
  xxs: null,
  xs: null,
  s: null,
  m: null,
  l: null,
  xl: null,
  xxl: null,
};

export const TextVariantStyles = StyleSheet.create({
  h1: {
    fontSize: 56,
  },
  h2: {
    fontSize: 48,
  },
  h3: {
    fontSize: 36,
  },
  h4: {
    fontSize: 32,
  },
  h5: {
    fontSize: 24,
  },
  h6: {
    fontSize: 18,
  },
  body1: {
    fontSize: 16,
  },
  body2: {
    fontSize: 14,
  },
  body3: {
    fontSize: 12,
  },
  subtitle1: {
    fontSize: 16,
  },
  subtitle2: {
    fontSize: 14,
  },
  overline: {
    fontSize: 12,
    textTransform: 'uppercase',
  },
  caption: {
    fontSize: 12,
  },
  error: {
    color: COLORS.ERROR,
    fontSize: 12,
  },
  helper: {
    color: COLORS.GRAY_THIRTY_THREE,
    fontSize: 12,
  },
  ...TYPOGRAPHY_STYLES,
});
