import { fontSizes, lineHeights, fontWeights } from '../global/typography';
import { systemPalette } from '../global/colors';
import { space } from '../global/space';

interface TypoColors {
  body: string;
  danger: string;
  error: string;
  hoverNestedLink: string;
  main: string;
  nestedLink: string;
  primary: string;
  subdued: string;
  success: string;
  warning: string;
  white: string;
}

interface TypoFontWeights {
  bold: number;
  light: number;
  nestedStrongTag: number;
  regular: number;
  semiBold: number;
}

interface TypoFontSizes {
  large: string;
  medium: string;
  small: string;
  xlarge: string;
  xsmall: string;
  xxlarge: string;
  xxxlarge: string;
  xxxxlarge: string;
  xxxxxlarge: string;
}

interface TypoLineHeights {
  large: string;
  medium: string;
  small: string;
  xlarge: string;
  xsmall: string;
  xxlarge: string;
  xxxlarge: string;
  xxxxlarge: string;
  xxxxxlarge: string;
}

interface TypoSpace {
  nestedUnorderedListPaddingLeft: string;
}

const typoColors: TypoColors = {
  main: systemPalette.text,
  body: systemPalette.bodyText,
  subdued: systemPalette.subduedText,
  primary: systemPalette.primary,
  success: systemPalette.success,
  danger: systemPalette.danger,
  warning: systemPalette.warning,
  error: systemPalette.error,
  white: systemPalette.lightText,
  nestedLink: systemPalette.primary,
  hoverNestedLink: systemPalette.hoverPrimary,
};

const typoFontWeights: TypoFontWeights = {
  light: fontWeights.light,
  regular: fontWeights.regular,
  semiBold: fontWeights.semiBold,
  bold: fontWeights.bold,
  nestedStrongTag: fontWeights.semiBold,
};

const typoFontSizes: TypoFontSizes = {
  xxxxxlarge: `${fontSizes.xxxxxlarge}px`,
  xxxxlarge: `${fontSizes.xxxxlarge}px`,
  xxxlarge: `${fontSizes.xxxlarge}px`,
  xxlarge: `${fontSizes.xxlarge}px`,
  xlarge: `${fontSizes.xlarge}px`,
  large: `${fontSizes.large}px`,
  medium: `${fontSizes.medium}px`,
  small: `${fontSizes.small}px`,
  xsmall: `${fontSizes.xsmall}px`,
};

const typoLineHeights: TypoLineHeights = {
  xxxxxlarge: `${lineHeights.xxxxxlarge}px`,
  xxxxlarge: `${lineHeights.xxxxlarge}px`,
  xxxlarge: `${lineHeights.xxxlarge}px`,
  xxlarge: `${lineHeights.xxlarge}px`,
  xlarge: `${lineHeights.xlarge}px`,
  large: `${lineHeights.large}px`,
  medium: `${lineHeights.medium}px`,
  small: `${lineHeights.small}px`,
  xsmall: `${lineHeights.xsmall}px`,
};

const typoSpace: TypoSpace = {
  nestedUnorderedListPaddingLeft: `${space.large}px`,
};

export {
  typoColors,
  typoFontSizes,
  typoFontWeights,
  typoLineHeights,
  typoSpace,
};