import { ThemeFontFamilies, ThemeFontSizes, ThemeFontWeights, ThemeLetterSpacings, ThemeLineHeights } from "styled-system";
import CSS from "csstype";

declare module "styled-system" {

  export interface ThemeFontFamilies {
    heading: string;
		body: string;
		mono: string;
  }

  export interface ThemeFontSizes {
		smaller: string | number;
		small: string | number;
		regular: string | number;
		medium: string | number;
		large: string | number;
		huge: string | number;
  }

  export interface ThemeFontWeights {
		hairline: CSS.Property.FontWeight;
		thin: CSS.Property.FontWeight;
		light: CSS.Property.FontWeight;
		normal: CSS.Property.FontWeight;
		medium: CSS.Property.FontWeight;
		semibold: CSS.Property.FontWeight;
		bold: CSS.Property.FontWeight;
		extrabold: CSS.Property.FontWeight;
		black: CSS.Property.FontWeight;
  }

  export interface ThemeLineHeights {
		normal: CSS.Property.LineHeight;
		none: CSS.Property.LineHeight;
		shorter: CSS.Property.LineHeight;
		short: CSS.Property.LineHeight;
		base: CSS.Property.LineHeight;
		tall: CSS.Property.LineHeight;
		taller: CSS.Property.LineHeight;
		"3": CSS.Property.LineHeight;
		"4": CSS.Property.LineHeight;
		"5": CSS.Property.LineHeight;
		"6": CSS.Property.LineHeight;
		"7": CSS.Property.LineHeight;
		"8": CSS.Property.LineHeight;
		"9": CSS.Property.LineHeight;
		"10": CSS.Property.LineHeight;
  }

  export interface ThemeLetterSpacings {
		tighter: CSS.Property.LineHeight;
		tight: CSS.Property.LineHeight;
		normal: CSS.Property.LineHeight;
		wide: CSS.Property.LineHeight;
		wider: CSS.Property.LineHeight;
		widest: CSS.Property.LineHeight;
  }
}


export const fontsMap: Partial<ThemeFontFamilies> = {
  heading: `-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
  body: `-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
  mono: `SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace`,
};


export const fontSizesMap: Partial<ThemeFontSizes> = {
  smaller: '0.75rem',
  small: '0.875rem',
  regular: '1rem',
  medium: '1.125rem',
  large: '1.3rem',
  huge: '1.5rem'
};


export const fontWeightsMap: Partial<ThemeFontWeights> = {
  hairline: 100,
  thin: 200,
  light: 300,
  normal: 400,
  medium: 500,
  semibold: 600,
  bold: 700,
  extrabold: 800,
  black: 900,
};


export const lineHeightsMap: Partial<ThemeLineHeights> = {
  normal: 'normal',
  none: 1,
  shorter: 1.25,
  short: 1.375,
  base: 1.5,
  tall: 1.625,
  taller: '2',
  '3': '.75rem',
  '4': '1rem',
  '5': '1.25rem',
  '6': '1.5rem',
  '7': '1.75rem',
  '8': '2rem',
  '9': '2.25rem',
  '10': '2.5rem',
};


export const letterSpacingsMap: Partial<ThemeLetterSpacings> = {
  tighter: '-0.05em',
  tight: '-0.025em',
  normal: '0',
  wide: '0.025em',
  wider: '0.05em',
  widest: '0.1em',
};