/**
 * @requires https://material.io/guidelines/layout/metrics-keylines.html
 * @see http://cssreference.io/
 */
/**
 * @readonly https://jira.skava.net/confluence/display/ux/Quality+Assurance+and+Design
 *
 * @tutorial https://jira.skava.net/confluence/display/ux/101+CSS
 * @see https://www.w3.org/Style/CSS20/
 * @api https://www.w3.org/TR/CSS/
 * @see csswizardry.com/2012/06/single-direction-margin-declarations/
 */
import { rem, font, VIEWPORT_BASE_WIDTH, VIEWPORT_BASE_WIDTH_TABLET } from '../functions'

const rems = rem.bind(undefined, undefined)

const dynamic = {
  // raf timing
  'transition-time': '.24s ease-in-out;',
  'favorites-icon-height': rems(17),
  'compare-icon-height': rems(23),
  'thumbs-width': rems(68),
  'color-image-width': rems(42),
  'sidebar-nav-width': rems(280),
  'sidebar-cart-width': rems(420),
}

const socialStage = '//socialstage.skavaone.com/skava-whitelabel-responsive'

// #colors
const colors = {
  // === core schema ===

  'colors-loader-background': 'rgba(30, 30, 30, 0.75)',
  'colors-loader-foreground': '#FFF',

  // @alias colors-green :3
  // 'colors-primary-brightgreen-not-ada-complient': '#59C485',
  'colors-primary': '#1E7D65',
  'colors-primary-dark': '#308653',
  'colors-primary-darkgreen': '#1E7D65',
  // dark blue
  'colors-secondary': '#003663',
  // @todo should unify our grey/gray :(
  'colors-fancy-gray': '#767676',
  'colors-fancy-orange': '#FF7000',

  /**
   * @todo @fixme  @hack - I do not think this color is actually valid and is an artifact of a save or a color picker
   */
  'colors-light-blue': '#003A70',
  // red
  'colors-attention': '#D54D4D',
  // black
  'colors-body-text': '#1E1E1E',
  // @alias body-text to keep consistent
  'colors-main-text': '#1E1E1E',

  // === light ===

  // light-grey
  'colors-body-text-light': '#999999',
  // white
  'colors-main-background': '#FFF',
  // @alias for main-background to keep consistent with others
  'colors-primary-background': '#FFF',
  'colors-white': '#FFF',
  // offwhite
  'colors-offwhite': '#F1F1F1',
  'colors-secondary-background': '#F7F8F9',
  // alias gray bg
  'colors-secondary-buttons': '#E7E7E7',
  'colors-secondary-buttons-background': '#E7E7E7',

  // duplicated
  'colors-gray': '#ACB1B4',
  'colors-inactive-radio-stroke': '#ACB1B4',
  'colors-active-radio-stroke': '#E1E1E1',
  'colors-active-radio-circle': '#003663',

  // lighter? |> common
  'colors-secondary-text': '#ACB1B4',
  'colors-secondary-body-text': '#707172',
  'colors-menu-background': '#E7E8E8',

  // gray
  'colors-medium-gray': '#9D9D9D',
  'colors-light-gray': '#DEDEDE',
  'colors-very-light-gray': '#D6D4E6',
  'colors-dark-gray': '#B8B8B8',
  'colors-light-border': '#CCC',
  'colors-sku-sizes': '#8f8f8f',
  'colors-incrementor-border': '#979797',

  // === dark ===

  // black 2
  'colors-black': '#000',
  // @todo - black-light for BEMish colors
  'colors-light-black': '#303030',
  'colors-black-border': '#393939',
  'colors-dark-border': '#B9B9B9',
  'colors-moneyshark-black': '#1F1F1F',
  'colors-midnight-black': '#003663',

  // === uniquish ===

  // social
  'colors-facebook': '#3D5A98',
  'colors-facebook-blue': '#3C5A97',

  'colors-twitter': '#4099FF',
  'colors-twitter-blue': '#4099FF',
  'colors-youtube': '#1da1f2',

  // red
  'colors-pinterest': '#bd091c',

  'colors-paypal': '#59C485',

  'colors-account-header-dropdown-border': '#B3B3B3',
  'colors-payment': '#313234',

  // account
  'colors-dark-cyan': '#4E6D78',
  'colors-medium-cyan': '#54727D',

  // white rabbit
  '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-breadcrumb': '#E7E8E8',
  'colors-breadcrumb-text': '#707172',
  'colors-breadcrumb-text-active': '#303030',
  'colors-breadcrumb-separator': '#999999',
  'colors-footer-text': '#1E1E1E',
  'colors-tabbed-navigation': '#003663',
  'colors-lighten-grey': '#EAEAEA',

  // the compatible names
  'colors-themed-black': '#1E1E1E',
  'colors-pancake': '#707172',

  // component names allow us to name colors, is meh
  'colors-star': '#1E1E1E',
  'colors-star-active': '#1E1E1E',
  'colors-curious-blue': '#159FD5',
}

// #font familys
const familys = {
  regular: '"ProximaNova-Regular",Arial,Helvetica,sans-serif',
  bold: '"ProximaNova-Bold",Arial,Helvetica,sans-serif',
  semi: '"ProximaNova-SemiBold",Arial,Helvetica,sans-serif',
  light: '"ProximaNova-Light",Arial,Helvetica,sans-serif',
}

// fonts
// @DEUS using this to keep track of all font sizes for naming later
// @ALL DO NOT use the fontSizes variables, use the fonts below
// const fontSizes = {
//   x: '8px',
//   xx: '11px',
//   xxx: '12px',
//   xxxx: '13px',
//   xxxxx: '14px',
//   xxxxxx: '15px',
//   xxxxxxx: '16px',
//   xxxxxxxx: '17px',
//   xxxxxxxxx: '18px',
//   xxxxxxxxxx: '20px',
//   xxxxxxxxxxx: '21px',
//   xxxxxxxxxxxx: '22px',
//   xxxxxxxxxxxxx: '24px',
//   xxxxxxxxxxxxxx: '25px',
//   xxxxxxxxxxxxxxx: '29px',
//   xxxxxxxxxxxxxxxx: '32px',
// }

// const fontSizeName = (size, type) => font(undefined, size, type)
// ===
// const fontSizeName = font.bind("this", undefined, 17)

const fontSizeName = font.bind(undefined, undefined)

// @TODO use rem
const fonts = {
  // 0.75rem => 12px
  'font-size-icon-count': `0.75rem`,
  'font-accordion-content': fontSizeName(17, 'regular'),
  'font-accordion-title': fontSizeName(17, 'regular'),
  'font-banner-title': `3vw ${familys.regular}`,
  'font-banner-title-mobile': `12vw ${familys.regular}`,
  'font-regular-12': fontSizeName(12, 'regular'),
  'font-banner-title-strong': `3vw ${familys.bold}`,
  'font-banner-title-strong-mobile': `8vw ${familys.bold}`,
  'font-body': fontSizeName(15, 'regular'),
  'font-body-semi': fontSizeName(15, 'semi'),
  'font-body-bold': fontSizeName(15, 'bold'),
  'font-breadcrumbs': fontSizeName(13, 'regular'),
  'font-search-results': fontSizeName(13, 'regular'),
  'font-category-description': fontSizeName(17, 'regular'),
  // 17
  'font-button-semi': fontSizeName(11, 'semi'),
  'font-copyright': fontSizeName(14, 'regular'),
  'font-family-bold': '700 Roboto",Arial,Helvetica,sans-serif',
  'font-family-light': '300 Roboto",Arial,Helvetica,sans-serif',
  'font-family-regular': '400 Roboto",Arial,Helvetica,sans-serif',
  'font-family-semi': '500 Roboto",Arial,Helvetica,sans-serif',
  'font-header': fontSizeName(25, 'regular'),
  'font-header-secondary': fontSizeName(21, 'regular'),
  'font-store-name': fontSizeName(13, 'bold'),
  'font-item-name': fontSizeName(32, 'regular'),
  'font-link': fontSizeName(20, 'semi'),
  'font-menu-navigation': fontSizeName(14, 'semi'),
  'font-menu-navigation-inner-title': fontSizeName(15, 'bold'),
  'font-menu-navigation-inner-body': fontSizeName(13, 'regular'),
  'font-original-price': fontSizeName(20, 'light'),
  'font-price-bold': fontSizeName(29, 'bold'),
  'font-product-block-price': fontSizeName(13, 'semi'),
  'font-product-filter': fontSizeName(13, 'semi'),
  // 21
  'font-product-filter-refine': fontSizeName(18, 'regular'),
  'font-product-filter-reset': fontSizeName(15, 'semi'),
  'font-product-list-subtitle': fontSizeName(13, 'regular'),
  'font-product-list-title': fontSizeName(22, 'semi'),
  'font-address-title': fontSizeName(22, 'bold'),
  'font-sale-price': fontSizeName(20, 'regular'),
  'font-top-bar': fontSizeName(12, 'regular'),
  'font-small-regular': fontSizeName(13, 'regular'),
  'font-store-list-store-title': fontSizeName(13, 'regular'),
  'font-store-list-store-title-active': fontSizeName(13, 'bold'),
  'font-store-list-products-title': fontSizeName(11, 'bold'),
  'font-9-bold': fontSizeName(9, 'bold'),
  'font-11-bold': fontSizeName(11, 'bold'),
  'font-11-semi': fontSizeName(11, 'semi'),
  'font-11-regular': fontSizeName(11, 'regular'),
  'font-store-active-timings': fontSizeName(13, 'regular'),
  'font-modal-header': fontSizeName(18, 'bold'),
  'font-storelocator-label': fontSizeName(16, 'bold'),
  'font-semi-bold': fontSizeName(13, 'semi'),
  'font-cart': fontSizeName(13, 'regular'),
  'font-signin-bold': fontSizeName(18, 'bold'),
  'font-large-semi-bold': fontSizeName(24, 'semi'),
  'font-22': fontSizeName(22, 'regular'),
  'font-24': fontSizeName(24, 'regular'),
  'font-23': fontSizeName(23, 'regular'),
  'font-16-bold': fontSizeName(16, 'bold'),
  'font-16-regular': fontSizeName(16, 'regular'),
  'font-14-bold': fontSizeName(14, 'bold'),
  'font-14-regular': fontSizeName(14, 'regular'),
  'font-20-semi': fontSizeName(20, 'semi'),
  'font-18-semi': fontSizeName(18, 'semi'),
  'font-18-bold': fontSizeName(18, 'bold'),
  'font-15-semi': fontSizeName(15, 'semi'),
  'font-13-bold': fontSizeName(13, 'bold'),
  'font-13-semi': fontSizeName(13, 'semi'),
  'font-12-semi': fontSizeName(12, 'semi'),
  'font-13-regular': fontSizeName(13, 'regular'),
  // 'font-13-bold': fontSizeName(13, 'bold'),
  'font-12-bold': fontSizeName(12, 'bold'),
  'font-12-regular': fontSizeName(12, 'regular'),
  'font-bold': fontSizeName(undefined, 'bold'),
  'font-light': fontSizeName(undefined, 'light'),
  'font-regular': fontSizeName(undefined, 'regular'),
  'font-semi': fontSizeName(undefined, 'semi'),
  'font-checkout-normal-text-bold': fontSizeName(12, 'regular'),
  'font-20-bold': fontSizeName(20, 'bold'),

  // WR fonts
  // stepping down the declared fonts because web weights look heavier...
  'font-headline': fontSizeName(24, 'semi'),
  'font-title': fontSizeName(20, 'bold'),
  'font-button': fontSizeName(18, 'regular'),
  'font-product': fontSizeName(16, 'bold'),
  'font-menu': fontSizeName(16, 'semi'),
  'font-body-text': fontSizeName(16, 'regular'),
  'font-caption': fontSizeName(14, 'regular'),
}

const borders = {
  'border-radius': rems(2),
  '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-light-gray']}`,
}

const urls = {
  // 'skava-pdp-icons-sprite': `url(${socialStage}/v201706210008/img/sk_pdp_sprite.png)`,
  // for locale options
  // @todo optimize this
  'skava-header-icons-sprite': `url(${socialStage}/v201705240530/img/sk_header_sprite.png)`,
  // 'skava-header-icons-sprite2': `url(${socialStage}/v201710090452/img/sk_header_sprite.png)`,

  // // v201707092228
  // // v201711010308
  // 'skava-plp-icons-sprite': `url(${socialStage}/v201706050303/img/sk_plp_sprite.png)`,
  // 'skava-footer-icons-sprite': `url(${socialStage}/v201707280011/img/sk_footer_sprite.png)`,
  // 'skava-storelocator-sprite': `url(${socialStage}/v201707280011/img/storeLocator_sprite_tab_config.png)`,
  // 'skava-signin-sprite': `url(${socialStage}/v201710160341/img/signin-sprite.png)`,
  // // v201710310121
  // 'skava-myaccount-sprite': `url(${socialStage}/v201710160341/img/sk_account_sprite.png)`,
  // 'store-marker-Icon': `${socialStage}/2495/1479983708093.76244477.png`,
  // 'store-marker-Icon-Select': `${socialStage}/2495/1479984627581.1676342324.png`,
  // 'skava-shoppingbag-sprite': `url(${socialStage}/v201710160341/img/sk_shoppingbag_sprite_paymentgateway.png)`,
  // 'skava-paymentgateway-sprite': `url(${socialStage}/v201710310121/img/sk_shoppingbag_sprite_paymentgateway.png)`,
  // 'skava-share-sprite': `url(${socialStage}/v201710300502/img/sk_share_sprite.png")`,
}

/**
 * @todo @see https://material.io/guidelines/motion/duration-easing.html
 */
const transitions = {
  'transitions-fast': '.25s ease-out',
}

const icons = {
  'favorites-icon-height': '17px',
  'compare-icon-height': '23px',
}

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),

  // would be good to improve
  'spacing-max-width': VIEWPORT_BASE_WIDTH + 'px',
  'spacing-tablet-max-width': VIEWPORT_BASE_WIDTH_TABLET + 'px',
}

// https://css-tricks.com/css-style-guides/

// https://github.com/EightMedia/styleguide.js/blob/master/test/expected/extra-css.html
const heights = {
  'heights-input': '2.5rem',
  //
}
const widths = {}
const golden = {
  // http://www.companyfolders.com/blog/golden-ratio-design-examples
  // https://pearsonified.com/2011/12/golden-ratio-typography.php
  // http://uxmovement.com/content/applying-the-golden-ratio-to-layouts-and-rectangles/
  // https://www.miniwebtool.com/golden-rectangle-calculator/
}
// @todo  - TOUCH  SIZE
const corePresets = {
  // title
  // subtitle
  // aside title
  // list item
  // toolbar
}

/**
 * @deus ? bootrap z-index as a base (<- from @james: what about material vvv)
 *
 * @see https://material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 * @api https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bzhp5Z4wHba3VG9SaVpNbkpHb2s/whatismaterial-3d-elevation2.png
 */
const zindex = {
  'zindex-dropdown-backdrop': 90,
  'zindex-navbar': 10,
  'zindex-dropdown': 10,
  'zindex-fixed': 30,
  'zindex-sticky': 30,
  'zindex-modal-backdrop': 40,
  'zindex-modal': 50,
  'zindex-popover': 60,
  'zindex-tooltip': 70,
}

const theming = {
  // text decoration
  underline: 'underline',
}

// these values are replaced first
const all = {
  // socialStage,
  ...heights,
  ...colors,
  ...borders,
  ...fonts,
  ...urls,
  ...transitions,
  ...icons,
  ...dynamic,
  ...spacing,
  // ...presets,
  ...zindex,
  ...theming,
}

export default all