/* eslint-disable prefer-destructuring */
import { darken } from 'polished';
import { DefaultTheme } from 'styled-components';
import { Breakpoints, Scale } from './themeTypes';

const breakpoints: Breakpoints<string | number> = {
  sm: 0,
  md: '42.5em', // 680px
  lg: '64em', // 1024px
  xl: '80em' // 1280px
};

const fontSizes: Scale<string> = {
  0: '0.75rem', // 12px
  1: '0.875rem', // 14px
  2: '1rem', // 16px
  3: '1.125rem', // 18px
  4: '1.25rem', // 20px
  5: '1.5rem', // 24px
  6: '1.75rem', // 28px
  7: '2.125rem', // 34px
  8: '2.625rem', // 42px
  9: '3rem', // 48px
  10: '3.75rem' // 60px
};

const borderWidths = {
  0: '0px',
  1: '1px'
};

fontSizes.baseText = fontSizes[2];

const fontFamilies = {
  baseText: "'Inter', sans-serif"
};

const lineHeights = {
  none: 1, // 16 px
  tight: 1.15, // 18 px
  normal: 1.688, // 27 px
  loose: 2.188, // 35 px
  medium: 2.938, // 47 px
  large: 4.188, // 67 px
  xlarge: 4.938 // 79 px
};

const fontWeights = {
  light: 300,
  normal: 400,
  semiBold: 500,
  bold: 600,
  strong: 700
};

const space: Scale<string> = {
  0: '0',
  1: '5px',
  2: '10px',
  3: '16px',
  4: '24px',
  5: '36px',
  6: '48px',
  7: '80px',
  8: '120px'
};

space.s = space[2];
space.m = space[3];
space.l = space[5];
space.xl = space[6];
space.xxl = space[7];
space.xxxl = space[8];
space.formGap = '21px';

space.gridGap = space[4];

const zIndexes = {
  header: 80,
  sidebar: 100,
  modals: 120,
  selects: 140,
  tooltips: 160
};

let colors: any = {
  gray: ['#FFFFFF', '#152935', '#6C7D89', '#8C9BA5', '#EBF0F7'],
  brandBg: '#FAFDFF',
  brandLightest: '#DCEFFE',
  brandLighter: '#6DC7F7',
  brandMain: '#1348E4',
  brandDark: '#0024BD',
  brandDarkest: '#170087',
  info: '#2574B5',
  green: ['#00AA5E', '#0B6B40', '#D4F7E7'],
  yellow: ['#EFC100', '#FBF3D0', '#E3A30C'],
  red: ['#DB2C3E', '#FAE6E8'],
  white: '#FFFFFF'
};

colors = {
  ...colors,
  baseText: colors.gray[3],
  highlightText: colors.gray[1],
  placeholder: colors.gray[2],
  inactive: colors.gray[2],
  disabled: colors.gray[1],
  primary: colors.brandMain,
  secondary: colors.brandLighter,
  idle: colors.brandLighter,
  alert: colors.red[0],
  warning: colors.yellow[0],
  success: colors.green[0]
};

const shadows = {
  0: '',
  1: '0px 1px 2px rgba(21, 41, 53, 0.24), 0px 1px 3px rgba(21, 41, 53, 0.12);',
  2: '0px 3px 6px rgba(21, 41, 53, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.16);',
  3: '0px 3px 6px rgba(21, 41, 53, 0.1), 0px 10px 20px rgba(21, 41, 53, 0.15);',
  4: '0px 5px 10px rgba(21, 41, 53, 0.05), 0px 15px 25px rgba(21, 41, 53, 0.15);',
  5: '0px 20px 40px rgba(21, 41, 53, 0.1);'
};

const radii = {
  0: '',
  1: '2px',
  2: '4px',
  3: '8px',
  4: '16px'
};

const texts = {
  b1: {
    color: colors.gray[5],
    fontSize: fontSizes[2],
    fontWeight: fontWeights.normal,
    lineHeight: lineHeights.normal
  },
  b1m: {
    color: colors.highlightText,
    fontSize: fontSizes[2],
    fontWeight: fontWeights.semiBold,
    lineHeight: lineHeights.normal
  },
  b2: {
    color: colors.gray[5],
    fontSize: fontSizes[1],
    fontWeight: fontWeights.light,
    lineHeight: lineHeights.normal
  },
  b2m: {
    color: colors.highlightText,
    fontSize: fontSizes[1],
    fontWeight: fontWeights.semiBold
  },
  b3: {
    color: colors.highlightText,
    fontSize: fontSizes[0],
    fontWeight: fontWeights.normal
  },
  b3m: {
    color: colors.highlightText,
    fontSize: fontSizes[0],
    fontWeight: fontWeights.semiBold
  },
  sh1: {
    color: colors.gray[5],
    fontSize: fontSizes[3],
    lineHeight: lineHeights.normal,
    fontWeight: fontWeights.normal
  },
  c2: {
    color: colors.brandMain,
    fontSize: fontSizes[0],
    lineHeight: lineHeights.none,
    fontWeight: fontWeights.semiBold,
    letterSpacing: '0.4px'
  }
};

const headings = {
  h1: {
    color: colors.highlightText,
    fontSize: fontSizes[10],
    fontWeight: fontWeights.normal,
    lineHeight: lineHeights.xlarge,
    letterSpacing: -1
  },
  h2: {
    color: colors.highlightText,
    fontSize: fontSizes[9],
    fontWeight: fontWeights.normal,
    lineHeight: lineHeights.large,
    letterSpacing: -0.5
  },
  h3: {
    color: colors.highlightText,
    fontSize: fontSizes[7],
    fontWeight: fontWeights.semiBold,
    lineHeight: lineHeights.medium,
    letterSpacing: -0.25
  },
  h4: {
    color: colors.highlightText,
    fontSize: fontSizes[5],
    fontWeight: fontWeights.semiBold,
    lineHeight: lineHeights.loose
  },
  h5: {
    color: colors.highlightText,
    fontSize: fontSizes[4],
    fontWeight: fontWeights.semiBold,
    letterSpacing: 0.15
  },
  h6: {
    color: colors.highlightText,
    fontSize: fontSizes.baseText,
    fontWeight: fontWeights.normal
  }
};

const links = {
  color: colors.brandMain,
  '&:hover, &:focus': {
    color: darken(0.2, colors.secondary)
  }
};

const transitions = {
  hover: {
    ms: 150
  },
  modal: {
    ms: 200
  }
};

const maxWidth: Scale<string> = {
  0: '500px',
  1: '700px',
  2: '850px',
  3: '1000px',
  4: '1600px'
};

maxWidth.xs = maxWidth[0];
maxWidth.s = maxWidth[1];
maxWidth.m = maxWidth[2];
maxWidth.l = maxWidth[3];
maxWidth.xl = maxWidth[4];

const header = {
  height: '48px'
};

const sidebar = {
  width: '124px'
};

const footer = {
  height: header.height
};

export const theme: DefaultTheme = {
  breakpoints,
  fontSizes,
  fontFamilies,
  lineHeights,
  fontWeights,
  space,
  zIndexes,
  colors,
  shadows,
  radii,
  headings,
  texts,
  links,
  transitions,
  maxWidth,
  header,
  sidebar,
  footer,
  borderWidths
};
