/**
 * Style for ApBuilder.
 * @constructor ApBuilderStyle
 */

'use strict'

import React, {PropTypes as types} from 'react'
import {ApStyle} from 'apeman-react-style'
import {ApEditorStyle} from 'apeman-react-editor'
import {alpha} from 'apemancolor'

/** @lends ApBuilderStyle */
const ApBuilderStyle = React.createClass({
  propTypes: {
    style: types.object,
    highlightColor: types.string
  },
  getDefaultProps () {
    return {
      style: {},
      highlightColor: ApStyle.DEFAULT_HIGHLIGHT_COLOR,
      backgroundColor: ApStyle.DEFAULT_BACKGROUND_COLOR
    }
  },
  statics: {
    styleData (config) {
      let { highlightColor, backgroundColor } = config
      let tabHeight = 24
      let tabMargin = 8
      let tabCorner = 4
      let editorControlHeight = 64
      let animationDuration = 400

      let darkBorderColor = '#AAA'

      let editorPadding = 4
      let actionBarHeight = 32
      let toggleButtonHeight = 24
      return {
        all: {
          '.ap-builder': {
            display: 'block',
            position: 'relative',
            border: '1px solid #F0F0F0',
            background: backgroundColor,
            overflow: 'hidden'
          },
          '.ap-builder .ap-builder-frame': {
            border: '1px solid #F0F0F0',
            width: '100%',
            height: '100%',
            boxSizing: 'border-box'
          },
          '.ap-builder .ap-builder-overlay': {
            position: 'absolute',
            transform: 'translateZ(0)',
            left: 0,
            bottom: 0,
            right: 0,
            height: 0,
            boxSizing: 'border-box',
            background: 'rgba(250, 250, 250, 0.99)',
            padding: 0,
            transition: `height ${animationDuration}ms, padding-top ${animationDuration}ms`,
            border: 'none',
            boxShadow: '1px 1px 2px rgba(0,0,0,0.1)',
            top: 'auto'
          },
          '.ap-builder .ap-builder-overlay-enabled': {
            height: '100%',
            paddingTop: `${tabHeight + tabMargin}px`,
            borderTop: '1px solid #F0F0F0',
            bottom: '1px'
          },
          '.ap-builder .ap-builder-overlay .ap-builder-tab': {
            position: 'absolute',
            left: 0,
            top: `${-1 * tabHeight}px`,
            transition: `top ${animationDuration}ms`,
            right: 0,
            margin: 0,
            display: 'block',
            textAlign: 'right',
            padding: '0 8px'
          },
          '.ap-builder .ap-builder-overlay-enabled .ap-builder-tab': {
            top: `${tabMargin}px`
          },
          '.ap-builder .ap-builder-overlay-enabled .ap-builder-tab .ap-tab-item': {
            transform: `translateY(${tabHeight}px)`
          },
          '.ap-builder .ap-builder-overlay-enabled .ap-builder-tab .ap-tab-item-selected': {
            transform: `translateY(${0}px)`
          },
          '.ap-builder .ap-tab-content': {
            boxSizing: 'border-box',
            padding: 0,
            border: 'none',
            height: '100%',
            overflow: 'hidden'
          },
          '.ap-builder .ap-tab-content-selected': {},
          '.ap-builder .ap-tab-group .ap-tab-item': {
            borderRadius: `${tabCorner}px ${tabCorner}px 0 0`,
            borderStyle: 'solid',
            borderColor: '#DDD',
            margin: '0 4px',
            padding: '0 16px',
            fontSize: '11px',
            lineHeight: `${tabHeight}px`,
            borderWidth: '1px 1px 0',
            height: `${tabHeight - 1}px`,
            boxSizing: 'content-box',
            background: '#FAFAFA',
            position: 'relative',
            transition: `transform ${animationDuration}ms`,
            minWidth: '48px'
          },
          '.ap-builder .ap-tab-group .ap-tab-item:hover': {
            background: 'white'
          },
          '.ap-builder .ap-tab-group .ap-tab-item-selected': {
            background: 'white',
            borderColor: darkBorderColor
          },
          '.ap-builder-editor': {
            position: 'relative',
            height: '100%',
            paddingBottom: `${editorControlHeight}px`,
            overflow: 'auto',
            boxSizing: 'border-box',
            display: 'flex',
            flexDirection: 'column'
          },
          '.ap-builder-editor-main': {
            height: '100%',
            position: 'relative',
            overflow: 'hidden'
          },
          '.ap-builder-overlay-spin': {
            position: 'absolute',
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
            background: ApStyle.COVER_BACKGROUND,
            zIndex: 4,
            color: '#AAA'
          },
          '.ap-builder-editor .ap-builder-editor-control': {
            position: 'absolute',
            height: `${editorControlHeight}px`,
            left: 0,
            bottom: 0,
            right: 0,
            zIndex: 4,
            padding: '8px 0',
            boxSizing: 'border-box',
            borderTop: '1px solid #F0F0F0',
            display: 'flex',
            alignItems: 'center'
          },
          '.ap-builder-editor .ap-button-group': {
            width: '100%'
          },
          '.ap-builder-editor .ap-editor': {
            borderTop: `1px solid ${darkBorderColor}`,
            height: '100%',
            padding: `${editorPadding}px`,
            boxSizing: 'border-box'
          },
          '.ap-builder-editor .ap-editor .CodeMirror': {
            boxSizing: 'border-box',
            boxShadow: 'none',
            height: '100%',
            borderTopColor: darkBorderColor
          },
          '.ap-builder .ap-builder-spinner': {
            position: 'absolute',
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
            backgroundColor: ApStyle.COVER_BACKGROUND,
            color: ApStyle.COVER_COLOR,
            zIndex: 8
          },
          '.ap-builder .ap-builder-tab-item.ap-builder-tab-item-errored': {
            color: ApStyle.ERROR_COLOR,
            borderColor: ApStyle.ERROR_COLOR,
            backgroundColor: alpha(ApStyle.ERROR_COLOR, 0.1)
          },
          '.ap-builder-editor-main-with-action': {},
          '.ap-builder-editor-action-bar': {
            textAlign: 'right',
            position: 'absolute',
            bottom: `${editorPadding}px`,
            left: `${editorPadding}px`,
            padding: '0 4px',
            right: `${editorPadding}px`,
            background: 'rgba(240,240,240,0.9)',
            borderTop: '1px solid #CCC',
            height: 0,
            zIndex: 8,
            boxSizing: 'border-box',
            transition: 'height 400ms'
          },
          '.ap-builder-editor-action-bar.ap-builder-editor-action-bar-open': {
            height: `${actionBarHeight}px`
          },
          '.ap-builder-editor-action-bar .ap-builder-editor-action-bar-toggle': {
            display: 'inline-block',
            position: 'absolute',
            right: '4px',
            zIndex: 4,
            padding: '0 8px',
            boxSizing: 'border-box',
            lineHeight: `${toggleButtonHeight}px`,
            height: `${toggleButtonHeight}px`,
            bottom: '100%',
            color: 'inherit'
          },
          '.ap-builder-editor-action-bar .ap-builder-editor-action-bar-toggle:hover': {
            color: '#666'
          },
          '.ap-builder-editor-action-bar .ap-builder-editor-action-item': {
            fontSize: '11px',
            display: 'inline-block',
            padding: '0 8px',
            margin: '0 4px',
            height: `${actionBarHeight}px`,
            lineHeight: `${actionBarHeight}px`,
            color: '#555',
            cursor: 'pointer'
          }
        },
        small: {},
        medium: {},
        large: {}
      }
    }
  },
  render () {
    const s = this
    let { props } = s

    let {highlightColor, backgroundColor} = props

    let { all, small, medium, large } = ApBuilderStyle.styleData(props)

    return (
      <ApStyle data={ Object.assign(all, props.style) }
               smallMediaData={ small }
               mediumMediaData={ medium }
               largeMediaData={ large }
      > { ApStyle.styleContent(<ApEditorStyle highlightColor={ highlightColor }
                                              backgroundColor={ backgroundColor }
      />) }{ props.children }</ApStyle>
    )
  }
})

export default ApBuilderStyle