import {
  getLuminance,
  transparentize
} from 'polished'
import _round from 'lodash/round'

import {generateInteractionColor} from '../utilStyles'

const reactSelectTheme = (theme, outerTheme) => ({
  ...theme,
  borderRadius: outerTheme.radii.regular,
  colors: {
    ...theme.colors,
    primary: outerTheme.colors.signal.info.text,
    primary75: outerTheme.colors.signal.info.text,
    primary50: outerTheme.colors.signal.info.paper,
    primary25: outerTheme.colors.signal.info.paper,
    danger: outerTheme.colors.signal.danger.text,
    dangerLight: outerTheme.colors.signal.danger.paper
  }
})

const reactSelectStyles = outerTheme => {
  const spaceScale = exponent =>
    `${_round(exponentiate(outerTheme.space.base, exponent, outerTheme.space.factor), 3)}rem`

  const exponentiate = (base, exponent, factor) =>
    Math.pow(factor, exponent) * base

  const paper = generateInteractionColor(outerTheme.colors.paper)
  const text = generateInteractionColor(outerTheme.colors.text, {
    action: getLuminance(outerTheme.colors.paper) > 0.5 ? 'darken' : 'lighten'
  })
  const infoText = outerTheme.colors.signal.info.text
  const typography = {
    color: text[0],
    fontFamily: outerTheme.fontFamily.regular,
    fontSize: `${outerTheme.fontSize.base}rem`,
    fontWeight: outerTheme.fontWeights.regular,
    lineHeight: outerTheme.lineHeights.regular
  }
  return {
    container: (base, state) => ({
      ...base,
      ...typography,
      outline: 0
    }),
    control: (base, state) => ({
      ...base,
      backgroundColor: state.isDisabled ? paper[1] : paper[0],
      borderColor: state.isFocused
        ? infoText
        : state.theme.colors.neutral20,
      boxShadow: state.isFocused
        ? `0 0 8px ${transparentize(0.4, infoText)}`
        : null,
      '&:hover': {
        borderColor: state.isFocused ? infoText : state.theme.colors.neutral30
      }
    }),
    noOptionsMessage: (base, state) => ({
      ...base,
      color: outerTheme.colors.signal.warning.text,
      cursor: 'default',
      textAlign: 'left'
    }),
    loadingMessage: (base, state) => ({
      ...base,
      color: outerTheme.colors.signal.warning.text,
      cursor: 'default',
      textAlign: 'left'
    }),
    option: (base, state) => ({
      ...base,
      backgroundColor: state.isSelected
        ? paper[2]
        : state.isFocused
          ? paper[1]
          : paper[0],
      cursor: 'pointer',
      ':active': {
        backgroundColor: state.isSelected
          ? paper[2]
          : paper[1]
      }
    }),
    indicatorsContainer: (base, state) => ({
      ...base,
      '> span': {
        marginRight: `${spaceScale(-2)}`
      },
      '> span > button': {
        width: '2.6rem'
      }
    }),
    input: (base, state) => ({
      margin: `0 0 ${spaceScale(-2)} 0`
    }),
    menuList: (base, state) => ({
      ...base,
      ...typography
    }),
    multiValue: (base, state) => ({
      ...base,
      borderRadius: outerTheme.radii.regular,
      margin: `0 ${spaceScale(-2)} ${spaceScale(-2)} 0`
    }),
    multiValueLabel: (base, state) => ({
      ...base,
      borderRadius: outerTheme.radii.regular,
      color: text[0],
      fontSize: 'inherit'
    }),
    multiValueRemove: (base, state) => ({
      ...base,
      borderRadius: outerTheme.radii.regular,
      color: text[0],
      display: state.isDisabled ? 'none' : 'flex',
      ':hover': {
        ...base[':hover'],
        color: text[1],
        backgroundColor: paper[2],
        cursor: 'pointer'
      }
    }),
    singleValue: (base, state) => ({
      ...base,
      color: text[0],
      margin: `0 ${spaceScale(-2)}`
    }),
    valueContainer: (base, state) => ({
      ...base,
      padding: `${spaceScale(-2)} ${spaceScale(-1)} 0 ${spaceScale(-2)}`
    })
  }
}

export {
  reactSelectStyles,
  reactSelectTheme
}

@@ -57,51 +57,20 @@
 ed'%0A
+%0A
 import 
-_round from 'lodash/round'%0A%0Aimport %7B
+%7B%0A  
 gene
@@ -89,16 +89,26 @@
 ionColor
+,%0A  scale%0A
 %7D from '
@@ -632,217 +632,39 @@
 nst 
-spaceScale = exponent =%3E%0A    %60$%7B_round(exponentiate(outerTheme.space.base, exponent, outerTheme.space.factor), 3)%7Drem%60%0A%0A  const exponentiate = (base, exponent, factor) =%3E%0A    Math.pow(factor, exponent) * base%0A
+fakeProps = %7Btheme: outerTheme%7D
 %0A  c
@@ -2443,34 +2443,46 @@
 nRight: %60$%7Bs
-paceScale(
+cale.space(fakeProps, 
 -2)%7D%60%0A      
@@ -2600,34 +2600,46 @@
 in: %600 0 $%7Bs
-paceScale(
+cale.space(fakeProps, 
 -2)%7D 0%60%0A    
@@ -2840,36 +2840,60 @@
  $%7Bs
-paceScale(-2)%7D $%7BspaceScale(
+cale.space(fakeProps, -2)%7D $%7Bscale.space(fakeProps, 
 -2)%7D
@@ -3474,34 +3474,46 @@
 rgin: %600 $%7Bs
-paceScale(
+cale.space(fakeProps, 
 -2)%7D%60%0A    %7D)
@@ -3592,56 +3592,92 @@
 %60$%7Bs
-paceScale(-2)%7D $%7BspaceScale(-1)%7D 0 $%7BspaceScale(
+cale.space(fakeProps, -2)%7D $%7Bscale.space(fakeProps, -1)%7D 0 $%7Bscale.space(fakeProps, 
 -2)%7D

remove duplicate of scaling function