import { CSSProperties } from "@mui/styles";
import { FontSize, FontWeight, SizeType } from "../types";

export const fontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
export const fontSize = {
  "50": "10px",
  "75": "11px",
  "100": "12px",
  "200": "14px",
  "300": "16px",
  "400": "18px",
  "500": "20px",
  "600": "24px",
  "700": "30px",
  "800": "36px",
  "900": "40px",
} as const;

export const fontWeight = {
  regular: 400,
  medium: 500,
  bold: 700,
} as const;

export const lineHeight = {
  "50": "12px",
  "75": "12px",
  "100": "16px",
  "200": "20px",
  "300": "24px",
  "400": "26px",
  "500": "28px",
  "600": "32px",
  "700": "36px",
  "800": "40px",
  "900": "48px",
};

export const letterSpacing = {
  "50": "0.03em",
  "75": "0.03em",
  "100": "0.005em",
  "200": "0.005em",
  "300": "0.005em",
  "400": "0.005em",
  "500": "0.005em",
  "600": "0.005em",
  "700": "0.0025em",
  "800": "0em",
  "900": "0em",
};

const getTextStyle = (
  size: SizeType,
  weightName: FontWeight
): CSSProperties => ({
  fontFamily,
  fontSize: fontSize[size],
  fontWeight: fontWeight[weightName],
  lineHeight: lineHeight[size],
  letterSpacing: letterSpacing[size],
});

const generateTextStyles = () => {
  const keysForFontWeight = Object.keys(fontWeight) as FontWeight[];
  const keysForSize = Object.keys(fontSize) as FontSize[];
  const initialTextStyles = {} as Record<string, CSSProperties>;

  return keysForSize.reduce((textStyle, size) => {
    for (const fontWeight of keysForFontWeight) {
      const firstCharOfFontWeight = fontWeight.charAt(0).toUpperCase();
      const textStyleKey = firstCharOfFontWeight + size; // e.g. "B100" for bold 100

      textStyle[textStyleKey] = getTextStyle(size, fontWeight);
    }

    return textStyle;
  }, initialTextStyles);
};

export default {
  fontFamily,
  fontSizes: fontSize,
  fontWeights: fontWeight,
  lineHeights: lineHeight,
  letterSpacings: letterSpacing,
  textStyles: generateTextStyles(),
} as const;
