import { TextStyle } from 'react-native';

import { color, typography } from '../../theme';

/**
 * All text will start off looking like this.
 */
const BASE: TextStyle = {
  color: color.text,
  fontFamily: typography.fonts.regular,
  fontWeight: typography.fontWeight.regular,
};

/**
 * All the variations of text styling within the app.
 *
 * You want to customize these to whatever you need in your app.
 */
export const textPresets = {
  /**
   * Headers styles.
   */
  header1: {
    ...BASE,
    fontSize: typography.fontSize[10],
    fontWeight: typography.fontWeight.bold,
    letterSpacing: -typography.letterSpacing[6],
    lineHeight: typography.lineHeight[9],
  } as TextStyle,
  header2: {
    ...BASE,
    fontSize: typography.fontSize[9],
    fontWeight: typography.fontWeight.semiBold,
    letterSpacing: -typography.letterSpacing[5],
    lineHeight: typography.lineHeight[8],
  } as TextStyle,
  header3: {
    ...BASE,
    fontSize: typography.fontSize[8],
    fontWeight: typography.fontWeight.semiBold,
    letterSpacing: -typography.letterSpacing[4],
    lineHeight: typography.lineHeight[7],
  } as TextStyle,
  header4: {
    ...BASE,
    fontSize: typography.fontSize[7],
    fontWeight: typography.fontWeight.semiBold,
    letterSpacing: -typography.letterSpacing[3],
    lineHeight: typography.lineHeight[6],
  } as TextStyle,
  header5: {
    ...BASE,
    fontSize: typography.fontSize[6],
    fontWeight: typography.fontWeight.semiBold,
    lineHeight: typography.lineHeight[5],
  } as TextStyle,
  header6: {
    ...BASE,
    fontSize: typography.fontSize[5],
    fontWeight: typography.fontWeight.semiBold,
    letterSpacing: typography.letterSpacing[0],
    lineHeight: typography.lineHeight[4],
  } as TextStyle,

  /**
   * Subtitle styles
   */
  subtitle1: {
    ...BASE,
    fontSize: typography.fontSize[4],
    fontWeight: typography.fontWeight.medium,
    letterSpacing: typography.letterSpacing[1],
    lineHeight: typography.lineHeight[3],
  } as TextStyle,
  subtitle2: {
    ...BASE,
    fontSize: typography.fontSize[3],
    fontWeight: typography.fontWeight.semiBold,
    letterSpacing: typography.letterSpacing[2],
    lineHeight: typography.lineHeight[2],
  } as TextStyle,

  /**
   * Body styles
   */
  body1: {
    ...BASE,
    fontSize: typography.fontSize[4],
    letterSpacing: typography.letterSpacing[1],
    lineHeight: typography.lineHeight[4],
  } as TextStyle,
  body2: {
    ...BASE,
    fontSize: typography.fontSize[3],
    letterSpacing: typography.letterSpacing[2],
    lineHeight: typography.lineHeight[4],
  } as TextStyle,

  /**
   * Caption styles
   */
  caption: {
    ...BASE,
    fontSize: typography.fontSize[2],
    fontWeight: typography.fontWeight.medium,
    letterSpacing: typography.letterSpacing[3],
    lineHeight: typography.lineHeight[1],
  } as TextStyle,

  /**
   * Overline styles
   */
  overline: {
    ...BASE,
    fontSize: typography.fontSize[1],
    fontWeight: typography.fontWeight.extraBold,
    letterSpacing: typography.letterSpacing[6],
    lineHeight: typography.lineHeight[0],
    textTransform: 'uppercase',
  } as TextStyle,
};

/**
 * Type of the text presets.
 */
export type TextPresets = keyof typeof textPresets;

/**
 * Bold types
 */
export const boldTypePresets = {
  bold: {
    fontWeight: typography.fontWeight.bold,
  } as TextStyle,
  'semi-bold': {
    fontWeight: typography.fontWeight.bold,
  } as TextStyle,
};

/**
 * Type of the bold type presets.
 */
export type BoldTypePresets = keyof typeof boldTypePresets;
