import { scale } from '../../utils/scale';

interface FontWeights {
  light: string;
  regular: string;
  medium: string;
  semiBold: string;
  lightItalic: string;
  regularItalic: string;
  mediumItalic: string;
  semiBoldItalic: string;
}

interface Fonts {
  neutral: FontWeights;
  playful: FontWeights;
}

interface FontSizes {
  '7xlarge': number;
  '6xlarge': number;
  xxxxxlarge: number;
  xxxxlarge: number;
  xxxlarge: number;
  xxlarge: number;
  xlarge: number;
  large: number;
  medium: number;
  small: number;
  xsmall: number;
}

type LineHeights = FontSizes;

// Hero design web typo scale is following
// https://www.ibm.com/design/language/typography/type-specs-ui#scales
const genFontSize = (prev: number, at: number): number =>
  prev + Math.floor(Math.abs((at - 2) / 4) + 1) * 2;

const getFonts = ({
  neutral,
  playful,
}: {
  neutral: string;
  playful: string;
}): Fonts => ({
  neutral: {
    light: `${neutral}-Light`,
    lightItalic: `${neutral}-LightItalic`,
    regular: `${neutral}-Regular`,
    regularItalic: `${neutral}-RegularItalic`,
    medium: `${neutral}-Medium`,
    mediumItalic: `${neutral}-MediumItalic`,
    semiBold: `${neutral}-SemiBold`,
    semiBoldItalic: `${neutral}-SemiBoldItalic`,
  },
  playful: {
    light: `${playful}-Light`,
    lightItalic: `${playful}-LightItalic`,
    regular: `${playful}-Regular`,
    regularItalic: `${playful}-RegularItalic`,
    medium: `${playful}-Regular`,
    mediumItalic: `${playful}-RegularItalic`,
    semiBold: `${playful}-Medium`,
    semiBoldItalic: `${playful}-MediumItalic`,
  },
});

const getFontSizes = (baseFontSize: number): FontSizes => {
  const fontSizes = Array.from(new Array(11));
  fontSizes.forEach((_, index) => {
    if (index === 0) {
      fontSizes[0] = baseFontSize;
    } else {
      fontSizes[index] = genFontSize(fontSizes[index - 1], index);
    }
    return undefined;
  });
  return {
    '7xlarge': scale(fontSizes[10]), // 42
    '6xlarge': scale(fontSizes[9]), //  36
    xxxxxlarge: scale(fontSizes[8]), // 32
    xxxxlarge: scale(fontSizes[7]), //  28
    xxxlarge: scale(fontSizes[6]), //   24
    xxlarge: scale(fontSizes[5]), //    20
    xlarge: scale(fontSizes[4]), //     18
    large: scale(fontSizes[3]), //      16
    medium: scale(fontSizes[2]), //     14
    small: scale(fontSizes[1]), //      12
    xsmall: scale(fontSizes[0]), //     10
  };
};

const getLineHeights = (fontSizes: FontSizes): LineHeights => {
  const additionalSpace = 8;
  return {
    '7xlarge': fontSizes['7xlarge'] + additionalSpace,
    '6xlarge': fontSizes['6xlarge'] + additionalSpace,
    xxxxxlarge: fontSizes.xxxxxlarge + additionalSpace,
    xxxxlarge: fontSizes.xxxxlarge + additionalSpace,
    xxxlarge: fontSizes.xxxlarge + additionalSpace,
    xxlarge: fontSizes.xxlarge + additionalSpace,
    xlarge: fontSizes.xlarge + additionalSpace,
    large: fontSizes.large + additionalSpace,
    medium: fontSizes.medium + additionalSpace,
    small: fontSizes.small + additionalSpace / 2,
    xsmall: fontSizes.xsmall + additionalSpace / 2,
  };
};

export { getFonts, getFontSizes, getLineHeights };

export type { Fonts, FontSizes };