import { getEM } from 'utils/styles/converters';

import colours from './colours.json';
import button from './button-config.json';

export type ThemeBreakpointOptions =
  | 'small'
  | 'medium'
  | 'large';

type ThemeBreakpoints = {
  [option in ThemeBreakpointOptions]: string;
};

type ThemeBreakPointValues = {
  [key: string]: number
};

export const BREAKPOINT_VALUES: ThemeBreakPointValues = {
  SMALL: 768,
  MEDIUM: 1025,
  LARGE: 1400
}

export const breakpoints: ThemeBreakpoints = {
  small: `${BREAKPOINT_VALUES.SMALL}px`,
  medium: `${BREAKPOINT_VALUES.MEDIUM}px`,
  large: `${BREAKPOINT_VALUES.LARGE}px`
};

type FontSizeOptions =
  | 'xSmall'
  | 'xxSmall'
  | 'small'
  | 'base'
  | 'medium'
  | 'large'
  | 'xLarge'
  | 'xxLarge'
  | 'xxxLarge'
  | 'xxxxLarge'
  | 'xxxxxLarge'
  | 'xxxxxxLarge';

type FontSizes = {
  [option in FontSizeOptions]: string;
};

export const lineHeights: FontSizes = {
  xxSmall:     '17px',
  xSmall:      '18px',
  small:       '19px',
  base:        '24px',
  medium:      '25px',
  large:       '27px',
  xLarge:      '30px',
  xxLarge:     '32px',
  xxxLarge:    '43px',
  xxxxLarge:   '50px',
  xxxxxLarge:  '60px',
  xxxxxxLarge: '110px'
};

export const fontSizes: FontSizes = {
  xxSmall:     getEM(11),
  xSmall:      getEM(12),
  small:       getEM(14),
  base:        getEM(16),
  medium:      getEM(19),
  large:       getEM(21),
  xLarge:      getEM(24),
  xxLarge:     getEM(25),
  xxxLarge:    getEM(32),
  xxxxLarge:   getEM(40),
  xxxxxLarge:  getEM(80),
  xxxxxxLarge: getEM(110)
};

export const colors: any = {
  black: '#000000',
  white: '#ffffff',
  red: '#ee4238',
  grey: '#e1e1e1',
  passedGreen: '#389400',
  failedRed: '#FF1F00',
  ...colours
};

export const buttonRoundedness: any = {
  'Not Rounded': 0,
  'Small': '5px',
  'Medium': '10px',
  'Large': '20px',
  'Full': '200px'
};

export const buttonConfig = button;

export const easings = {
  easeIn: 'cubic-bezier(0.86, 0, 0.07, 1)'
};

export const durations = {
  slow: 600,
  standard: 300
}

export type SpaceSizes =
  | 'xxsmall'
  | 'xsmall'
  | 'small'
  | 'regular'
  | 'large'
  | 'xlarge'
  | 'xxlarge';

export const space: {[option in SpaceSizes]: number} = {
  xxsmall: 10,
  xsmall: 20,
  small: 30,
  regular: 40,
  large: 60,
  xlarge: 70,
  xxlarge: 110
};

const fonts = {
  sans: 'system-ui, sans-serif',
  mono: 'Menlo, monospace'
};

export const shadows = {
  small: '0 0 4px rgba(0, 0, 0, .125)',
  large: '0 0 24px rgba(0, 0, 0, .125)'
};

interface WidthTypes {
  maxScreen: number;
  container: number;
  restricted: number;
  basket: number;
  gutterWidth: number;
}

export const widths: WidthTypes = {
  maxScreen: 1400,
  container: 1180,
  restricted: 570,
  basket: 400,
  gutterWidth: 30
};

export default {
  breakpoints: Object.values(breakpoints),
  lineHeights: Object.values(lineHeights),
  fontSizes: Object.values(fontSizes),
  space: Object.values(space),
  colors,
  fonts,
  shadows
};