import { dopemerge as merge } from 'chain-able-boost'
import { rem, font, VIEWPORT_BASE_WIDTH, VIEWPORT_BASE_WIDTH_TABLET } from '../functions'
import base from './classic'

const rems = rem.bind(undefined, undefined)
const fontSizeName = font.bind(undefined, undefined)
const colors = {
  'colors-secondary-background': '#EFEFEF',
  'colors-main-background': '#FFF',
  'colors-primary': '#25A9E0',
  'colors-secondary': '#159FD5',

  // white rabbit
  'colors-white': '#FFF',
  'colors-black': '#000',
  'colors-main-text': '#000',
  'colors-blackrabbit': '#2C2C2C',
  'colors-grey': '#6D707F',
  'colors-lightgrey': '#A6AFC1',
  'colors-cloud': '#EFEFEF',
  'colors-almostwhite': '#F5F5F5',
  'colors-actionblue': '#25A9E0',
  'colors-gogreen': '#009944',
  'colors-brightred': '#EA2227',
  'colors-nav-text': '#264C7C',
  'colors-darkblue': '#264C7C',
  'colors-greyblue': '#5F6C88',
  'colors-almostgreyblue': '#2E3748',
  'colors-lightestgrey': '#CCC',
  'colors-greyshade': '#ACB1B4',

  'colors-black-shade': '#231f20',
  'colors-medium-grey': '#c5c7c9',
  'colors-grey-shade': '#a6a8ab',
  'colors-yellow': '#ffc10e',
  'colors-stormcloud': '#586060',
  'colors-gainsboro': '#D0DEE1',

  /**
   * @todo @see https://www.styled-components.com/docs/tooling#styled-theming
   */
  'colors-light-blue': '#25A9E0',
  'colors-inactive-radio-stroke': '#2C2C2C',
  'colors-active-radio-stroke': '#2C2C2C',
  'colors-active-radio-circle': '#25A9E0',
  'colors-pancake': '#000',
  'colors-curious-blue': '#159FD5',

  'colors-white-alpha': 'rgba(255, 255, 255, 0.90)',
  // '#ffffffe6'

  // Footer elements
  'colors-footer-bg': '#292929',
  'colors-footer-text': '#FFF',
  'colors-powered-by': '#17AEEA',

  'colors-blue-violet': '#8A2BE2',

  // Gradient
  'colors-white-transclusion':
    'linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,1) 100%)',
}

const borders = {
  'border-radius': rems(3),
  'border-bold': rems(4),
  'border-invisible': `${rems(1)} solid transparent`,
  'border-light': `${rems(1)} solid ${colors['colors-secondary-background']}`,
  'border-basic': `${rems(1)} solid ${colors['colors-secondary-text']}`,
  'border-thin': `${rems(1)} solid ${colors['colors-lightgrey']}`,
  'border-white': `${rems(1)} solid ${colors['colors-almostwhite']}`,
}

// moved to fns...
// seen in page of wr
// const sizing = {
//   maxWidth: 1200,
// }

const shadow = {
  boxShadow: '0px 2px 4px rgba(0,0,0,0.4)',
  textShadow: '0px 0px 6px #564c4c',
}

const fontStyle = {
  'font-style-italic': 'italic',
  'font-style-unset': 'unset',
  'font-style-strike-line': 'line-through',
  'font-style-above-line': 'overline',
  'font-style-under-line': 'underline',

  // !!!!! SUPER IMPORTANT THIS BASE REM SIZE AFFECTS SIZING FOR THE ENTIRE REM OF THE APP
  'font-body': fontSizeName(16, 'regular'),
}

const fonts = {
  // Regular
  'font-regular-very-small': fontSizeName(12, 'regular'),
  'font-regular-extra-small': fontSizeName(14, 'regular'),
  'font-regular-small': fontSizeName(16, 'regular'),
  'font-regular-default': fontSizeName(18, 'regular'),
  'font-regular-large': fontSizeName(20, 'regular'),
  'font-regular-xlarge': fontSizeName(24, 'regular'),
  'font-regular-big': fontSizeName(64, 'regular'),

  // Medium
  'font-medium-very-small': fontSizeName(12, 'semi'),
  'font-medium-extra-small': fontSizeName(14, 'semi'),
  'font-medium-small': fontSizeName(16, 'semi'),
  'font-medium-default': fontSizeName(18, 'semi'),
  'font-medium-large': fontSizeName(20, 'semi'),
  'font-medium-xlarge': fontSizeName(24, 'semi'),
  'font-medium-big': fontSizeName(64, 'semi'),

  // Bold
  'font-bold-very-small': fontSizeName(12, 'bold'),
  'font-bold-extra-small': fontSizeName(14, 'bold'),
  'font-bold-small': fontSizeName(16, 'bold'),
  'font-bold-default': fontSizeName(18, 'bold'),
  'font-bold-large': fontSizeName(20, 'bold'),
  'font-bold-xlarge': fontSizeName(24, 'bold'),
  'font-bold-big': fontSizeName(64, 'bold'),

  // Condensed
  'font-condensed-small-bold': 'bold 30px "Roboto Condensed"',
  'font-condensed-medium-bold': 'bold 32px "Roboto Condensed"',
  'font-condensed-large-bold': 'bold 52px "Roboto Condensed"',
  'font-condensed-extralarge-bold': 'bold 72px "Roboto Condensed"',

}

const baseSpacingSize = 16
const spacing = {
  // 1
  'spacing-smallest': rems(baseSpacingSize / 16),
  // 2
  'spacing-very-small': rems(baseSpacingSize / 8),
  // 4
  'spacing-extra-small': rems(baseSpacingSize / 4),
  // 8
  'spacing-small': rems(baseSpacingSize / 2),
  // 16
  'spacing': rems(baseSpacingSize),
  // 24
  'spacing-big': rems(baseSpacingSize * 1.5),
  // 32
  'spacing2x': rems(baseSpacingSize * 2),
  // 32 + 16
  'spacing3x': rems(baseSpacingSize * 3),
  // 32 + 32
  'spacing4x': rems(baseSpacingSize * 4),
  'spacing5x': rems(baseSpacingSize * 5),
  'spacing6x': rems(baseSpacingSize * 6),
  'spacing7x': rems(baseSpacingSize * 7),
  'spacing8x': rems(baseSpacingSize * 8),
  'spacing-accessible': rems(baseSpacingSize / 8),
}

const zindex = {
  'layer-position-1': 10,
  'layer-position-2': 20,
  'layer-position-3': 40,
  'layer-position-4': 60,
  'layer-position-5': 80,
  'layer-position-6': 90,
}
const all = {
  ...font,
  ...colors,
  ...spacing,
  ...fonts,
  ...fontStyle,
  ...shadow,
  ...borders,
  ...zindex,
}

const options = { stringToArray: false, boolToArray: false }
const merged = merge(base, all, options)

export default merged