import { OBJECT } from '@damenor/js-tools'

const grey = {
  grey: '#BDBDBD',
  grey100: '#F5F5F5',
  grey200: '#EEEEEE',
  grey300: '#E0E0E0',
  grey500: '#9E9E9E',
  grey600: '#757575',
  grey700: '#616161',
}

const colorDark = {
  bg: '#191919',
  bgContrast: '#eee',
  bgSecondary: '#222',
  bgSecondaryContrast: '#eee',
}
const colorLight = {
  bg: '#fff',
  bgContrast: '#333',
  bgSecondary: '#f9f9f9',
  bgSecondaryContrast: '#333',
}

const color = {
  primary: '#1db9b4',
  primaryContrast: '#fff',
  secondary: '#0077C8',
  secondaryContrast: '#fff',
  dark: '#111',
  light: '#fff',
  danger: '#ee5253',
  dangerContrast: '#fff',
  info: '#54a0ff',
  infoContrast: '#fff',
  success: '#1dd1a1',
  successContrast: '#fff',
  warning: '#ff9f43',
  warningContrast: '#fff',
  ...colorDark,

  // TODO
  colorLight,
  grey,
}

const fontSize = {
  xs: '0.8rem',
  s: '0.9rem',
  m: '1rem',
  l: '1.25rem',
  xl: '2rem',
  xxl: '3rem',
}

const spacing = {
  xs: '4px',
  s: '8px',
  m: '16px',
  l: '20px',
  xl: '24px',
  xxl: '32px',
}

const fontWeight = {
  xs: 100,
  s: 300,
  m: 400,
  l: 500,
  xl: 700,
  xxl: 900,
  bold: 'bold',
}

const DEVICE_BREAKPOINTS = {
  mobileS: '320px',
  mobileM: '375px',
  mobileL: '425px',
  tablet: '768px',
  laptop: '1024px',
  laptopL: '1440px',
  desktop: '2560px'
}

const device = {
  mobileS: `(min-width: ${DEVICE_BREAKPOINTS.mobileS})`,
  mobileM: `(min-width: ${DEVICE_BREAKPOINTS.mobileM})`,
  mobileL: `(min-width: ${DEVICE_BREAKPOINTS.mobileL})`,
  tablet: `(min-width: ${DEVICE_BREAKPOINTS.tablet})`,
  laptop: `(min-width: ${DEVICE_BREAKPOINTS.laptop})`,
  laptopL: `(min-width: ${DEVICE_BREAKPOINTS.laptopL})`,
  desktop: `(min-width: ${DEVICE_BREAKPOINTS.desktop})`,
  desktopL: `(min-width: ${DEVICE_BREAKPOINTS.desktop})`
}

const zIndex = {
  mobileStepper: 1000,
  fab: 1050,
  speedDial: 1050,
  appBar: 1100,
  drawer: 1200,
  modal: 1300,
  snackbar: 1400,
  tooltip: 1500,
}

export const THEME = {
  palette: { ...color },
  breakpoints: { ...device },
  typography: {
    fontSize,
    fontWeight,
  },
  spacing,
  zIndex,
  components: {},
  custom: {}
}

type Theme = typeof THEME
declare module 'styled-components' {
  export interface DefaultTheme extends Theme {}
}

export const createTheme = (theme: Partial<typeof THEME | any>) => OBJECT.mergeObjects(THEME, theme)