<div id="root"></div>

window.onload = () => {
  const { render } = ReactDOM
const { Component } = React
const { css, injectGlobal, default: styled } = styled
const { min, max, rem, em } = styleUtils

const styleUtils = (function () {
  const css = styled.css

  const rem = px => `${ px / 16 }rem`
  const em = (px, em = 16) => `${ px / em }em`

  const sizes = {
    mobileS: 1,
    mobileM: 375,
    mobileL: 425,

    tabletS: 600,
    tabletM: 768,
    tabletL: 900,

    laptopS: 1024,
    laptopM: 1366,
    laptopL: 1440
  }

  const spacing = {
    xxs: rem(2),
    xs:  rem(4),
    sm:  rem(8),
    md:  rem(16),
    lg:  rem(32),
    xl:  rem(64),
    xxl: rem(128)
  }

  let min = (pxWidth, conditions = '') => (...args) => css`
    @media (min-width: ${ em(pxWidth) }) ${ conditions } {
      ${ css(...args) }
    }
  `

  min = Object.keys(sizes).reduce((min, sizeLabel) => {
    min[sizeLabel] = (...args) => min(sizes[sizeLabel])(...args)
    return min
  }, min)


  let max = (pxWidth, conditions = '') => (...args) => css`
    @media (max-width: ${ em(pxWidth) }) ${ conditions } {
      ${ css(...args) }
    }
  `

  max = Object.keys(sizes).reduce((max, sizeLabel) => {
    max[sizeLabel] = (...args) => max(sizes[sizeLabel])(...args)
    return max
  }, max)

  const addPropSetter = (prop, rules, values = {}) => {
    const getSetRule = val => (rules.set instanceof Function)
      ? rules.set(values[val] || val)
      : rules.set

    if (!prop) return
    if (typeof prop !== 'object') return getSetRule(prop)

    const sizeVal = key => sizes[key] || key
    const sizeLabels = Object.keys(prop)
      .sort((a, b) => sizeVal(a) > sizeVal(b))

    const getRule = val => val === false
      ? rules.unset
      : getSetRule(val)

    return sizeLabels.map(sizeLabel => {
      return min(sizeVal(sizeLabel))([getRule(prop[sizeLabel])])
    })
  }

  const universalProps = css`
    box-sizing: ${ p => p.contentBox ? 'content-box' : 'border-box' };
    ${ p => p.inline && 'display: inline-block;' }
    ${ p => p.relative && 'position: relative;' }
  `

  const marginProps = p => [
    ...addPropSetter(p.m, {
      set: val => `margin: ${ val } !important;`,
      unset: `margin: initial !important;`
    }, spacing),

    ...addPropSetter(p.mx, {
      set: val => `
        margin-right: ${ val } !important;
        margin-left: ${ val } !important;
      `,
      unset: `
        margin-right: initial !important;
        margin-left: initial !important;
      `
    }, spacing),

    ...addPropSetter(p.my, {
      set: val => `
        margin-top: ${ val } !important;
        margin-bottom: ${ val } !important;
      `,
      unset: `
        margin-top: initial !important;
        margin-bottom: initial !important;
      `
    }, spacing),

    ...addPropSetter(p.mt, {
      set: val => `margin-top: ${ val } !important;`,
      unset: `margin-top: initial !important;`
    }, spacing),

    ...addPropSetter(p.mr, {
      set: val => `margin-right: ${ val } !important;`,
      unset: `margin-right: initial !important;`
    }, spacing),

    ...addPropSetter(p.mb, {
      set: val => `margin-bottom: ${ val } !important;`,
      unset: `margin-bottom: initial !important;`
    }, spacing),

    ...addPropSetter(p.ml, {
      set: val => `margin-left: ${ val } !important;`,
      unset: `margin-left: initial !important;`
    }, spacing)
  ]

  const paddingProps = p => [
    ...addPropSetter(p.p, {
      set: val => `padding: ${ val } !important;`,
      unset: `padding: initial !important;`
    }, spacing),

    ...addPropSetter(p.px, {
      set: val => `
        padding-right: ${ val } !important;
        padding-left: ${ val } !important;
      `,
      unset: `
        padding-right: initial !important;
        padding-left: initial !important;
      `
    }, spacing),

    ...addPropSetter(p.py, {
      set: val => `
        padding-top: ${ val } !important;
        padding-bottom: ${ val } !important;
      `,
      unset: `
        padding-top: initial !important;
        padding-bottom: initial !important;
      `
    }, spacing),

    ...addPropSetter(p.pt, {
      set: val => `padding-top: ${ val } !important;`,
      unset: `padding-top: initial !important;`
    }, spacing),

    ...addPropSetter(p.pr, {
      set: val => `padding-right: ${ val } !important;`,
      unset: `padding-right: initial !important;`
    }, spacing),

    ...addPropSetter(p.pb, {
      set: val => `padding-bottom: ${ val } !important;`,
      unset: `padding-bottom: initial !important;`
    }, spacing),

    ...addPropSetter(p.pl, {
      set: val => `padding-left: ${ val } !important;`,
      unset: `padding-left: initial !important;`
    }, spacing)
  ]

  const flexContainerProps = p => [
    ...addPropSetter(p.row, {
      set: `display: flex !important;`,
      unset: `display: initial !important;`
    }),

    ...addPropSetter(p.column, {
      set: `
        display: flex !important;
        flex-direction: column !important;
      `,
      unset: `
        display: initial !important;
        flex-direction: initial !important;
      `
    }),

    ...addPropSetter(p.wrap, {
      set: `flex-wrap: wrap !important;`,
      unset: `flex-wrap: initial !important;`
    }),

    ...addPropSetter(p.wrapReverse, {
      set: `flex-wrap: wrap-reverse !important;`,
      unset: `flex-wrap: initial !important;`
    }),

    ...addPropSetter(p.left, {
      set: `justify-content: flex-start !important;`,
      unset: `justify-content: initial !important;`
    }),

    ...addPropSetter(p.right, {
      set: `justify-content: flex-end !important;`,
      unset: `justify-content: initial !important;`
    }),

    ...addPropSetter(p.center, {
      set: `justify-content: center !important;`,
      unset: `justify-content: initial !important;`
    }),

    ...addPropSetter(p.spaceAround, {
      set: `justify-content: space-around !important;`,
      unset: `justify-content: initial !important;`
    }),

    ...addPropSetter(p.spaceBetween, {
      set: `justify-content: space-between !important;`,
      unset: `justify-content: initial !important;`
    }),

    ...addPropSetter(p.top, {
      set: `align-items: flex-start !important;`,
      unset: `align-items: initial !important;`
    }),

    ...addPropSetter(p.middle, {
      set: `align-items: center !important;`,
      unset: `align-items: initial !important;`
    }),

    ...addPropSetter(p.bottom, {
      set: `align-items: flex-end !important;`,
      unset: `align-items: initial !important;`
    }),

    ...addPropSetter(p.baseline, {
      set: `align-items: baseline !important;`,
      unset: `align-items: initial !important;`
    }),

    ...addPropSetter(p.stretch, {
      set: `align-items: stretch !important;`,
      unset: `align-items: initial !important;`
    }),

    ...addPropSetter(p.contentTop, {
      set: `align-content: flex-start !important;`,
      unset: `align-content: initial !important;`
    }),

    ...addPropSetter(p.contentMiddle, {
      set: `align-content: center !important;`,
      unset: `align-content: initial !important;`
    }),

    ...addPropSetter(p.contentBottom, {
      set: `align-content: flex-end !important;`,
      unset: `align-content: initial !important;`
    }),

    ...addPropSetter(p.contentStretch, {
      set: `align-content: stretch !important;`,
      unset: `align-content: initial !important;`
    }),

    ...addPropSetter(p.contentSpaceAround, {
      set: `align-content: space-around !important;`,
      unset: `align-content: initial !important;`
    }),

    ...addPropSetter(p.contentSpaceBetween, {
      set: `align-content: space-between !important;`,
      unset: `align-content: initial !important;`
    })
  ]

  const flexItemProps = p => [
    ...addPropSetter(p.order, {
      set: val => `order: ${ val } !important;`,
      unset: `order: initial !important;`
    }),

    ...addPropSetter(p.flex, {
      set: val => `flex: ${ val } !important;`,
      unset: `flex: initial !important;`
    }),

    ...addPropSetter(p.flexGrow, {
      set: val => `flex-grow: ${ val } !important;`,
      unset: `flex-grow: initial !important;`
    }),

    ...addPropSetter(p.flexShrink, {
      set: val => `flex-shrink: ${ val } !important;`,
      unset: `flex-shrink: initial !important;`
    }),

    ...addPropSetter(p.flexBasis, {
      set: val => `flex-basis: ${ val } !important;`,
      unset: `flex-basis: initial !important;`
    }),

    ...addPropSetter(p.selfLeft, {
      set: `margin-right: auto !important;`,
      unset: `margin-right: initial !important;`
    }),

    ...addPropSetter(p.selfCenter, {
      set: `
        margin-left: auto !important;
        margin-right: auto !important;
      `,
      unset: `
        margin-left: initial !important;
        margin-right: initial !important;
      `
    }),

    ...addPropSetter(p.selfRight, {
      set: `margin-left: auto !important;`,
      unset: `margin-left: initial !important;`
    }),

    ...addPropSetter(p.selfTop, {
      set: `align-self: flex-start !important;`,
      unset: `align-self: initial !important;`
    }),

    ...addPropSetter(p.selfMiddle, {
      set: `align-self: center !important;`,
      unset: `align-self: initial !important;`
    }),

    ...addPropSetter(p.selfBottom, {
      set: `align-self: flex-end !important;`,
      unset: `align-self: initial !important;`
    }),

    ...addPropSetter(p.selfBaseline, {
      set: `align-self: baseline !important;`,
      unset: `align-self: initial !important;`
    }),

    ...addPropSetter(p.selfStretch, {
      set: `align-self: stretch !important;`,
      unset: `align-self: initial !important;`
    })
  ]

  const computeSpacingRules = (props, getRule) => {
    const spacingLabel = Object.keys(props).filter(label => spacing[label])[0]
    const hasSpacingProp = spacing[spacingLabel] || props.value
    const spacingValue = spacing[spacingLabel] || rem(props.value)
    const spacingRule = getRule(spacingValue)

    const getSizeVal = label => sizes[label] || label
    const getSpacingVal = label => spacing[label] || rem(label)

    const sizesLabelsFromProps =
      Object.keys(props)
        .filter(label => sizes[label])
        .sort((a, b) => getSizeVal(a) > getSizeVal(b))

    const spacingRulesForSizes = sizesLabelsFromProps.map(sizeLabel => {
      const spacingLabel = props[sizeLabel]
      const spacingValue = getSpacingVal(spacingLabel)

      return min(getSizeVal(sizeLabel))`${ getRule(spacingValue) }`
    })

    return css`
      ${ spacingRule }
      ${ spacingRulesForSizes }
    `
  }

  return {
    sizes,
    spacing,
    rem,
    em,
    min,
    max,
    addPropSetter,
    computeSpacingRules,
    universalProps,
    flexContainerProps,
    flexItemProps,
    marginProps,
    paddingProps
  }
})()

injectGlobal`
  body {
    margin: 0;
  }
`

const Wrapper = styled.div`
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100vh;
  padding: 0 ${rem(50)};
  background-color: dodgerblue;
`

const Link = styled.a`
  -webkit-tap-highlight-color: transparent;
`

const blurShape = "M110,60c0,27.6-22.4,50-50,50c-27.6,0-50-22.4-50-50c0-27.6,22.4-50,50-50C87.6,10,110,32.4,110,60z";
const activeShape = "M96,60c0,27.6-8.4,53-36,53c-27.6,0-36-25.4-36-53c0-27.6,8.4-53,36-53C87.6,7,96,32.4,96,60z";

class Arrow extends Component {
  onActive = () => TweenMax.to(this.circle, .5, {
    attr: { d: activeShape },
    transformOrigin: 'center',
    ease: Elastic.easeOut
  });

  onBlur = () => TweenMax.to(this.circle, 1, {
    attr: { d: blurShape },
    ease: Elastic.easeOut
  });

  render() {
    const { className } = this.props
    const arrowID = Math.random()

    return (
      <div
        className={className}
        onMouseDown={this.onActive}
        onTouchStart={this.onActive}
        onMouseLeave={this.onBlur}
        onMouseUp={this.onBlur}
      >
        <svg
          viewBox="0 0 120 120"
          preserveAspectRatio="none"
          width="100%" height="100%"
        >
          <mask id={`${arrowID}`}>
            <rect fill="#fff" width="100%" height="100%"/>
            <path fill="#000" className="arrow" d="M48.5,61.5v-2.9h17.4l-8-8l2.1-2.1L71.5,60L60,71.5l-2.1-2.1l8-8H48.5z" />
          </mask>
          <path ref={el => this.circle = el} mask={`url(#${arrowID})`} d={blurShape} />
        </svg>
      </div>
    )
  }
}

Arrow = styled(Arrow)`
  width: ${rem(60)};
  height: ${rem(60)};
  fill: #fff;
  cursor: inherit;

  ${min(500)`
    width: ${rem(120)};
    height: ${rem(120)};
  `}

  ${({left}) => left && `transform: rotate(180deg);`}

  .arrow {
    ${max(500)`
      transform-origin: center;
      transform: scale(1.6);
    `}
  }
`

render(
  <Wrapper>
    <Link href="#"><Arrow left /></Link>
    <Link href="#"><Arrow /></Link>
  </Wrapper>,
  document.getElementById('root')
)


}