/**
 * Style for ApHeader.
 * @class ApHeaderStyle
 */

'use strict'

import React, {Component, PropTypes as types} from 'react'
import {alpha} from 'acolor'
import {ApStyle} from 'apeman-react-style'

/** @lends ApHeaderStyle */
class ApHeaderStyle extends Component {
  render () {
    const s = this
    let { props } = s

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

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

Object.assign(ApHeaderStyle, {
  propTypes: {
    style: types.object,
    height: types.number,
    color: types.string,
    backgroundColor: types.string,
    highlightColor: types.string,
    highlightHeight: types.number,
    tabHeight: types.number
  },
  defaultProps: {
    style: {},
    height: 44,
    tabHeight: 36,
    color: '#555555',
    highlightColor: ApStyle.DEFAULT_HIGHLIGHT_COLOR,
    backgroundColor: ApStyle.DEFAULT_BACKGROUND_COLOR,
    borderColor: '#F0F0F0',
    highlightHeight: 2
  },

  styleData (config) {
    let { color, backgroundColor, highlightColor, borderColor, height, highlightHeight, tabHeight } = config
    return {
      all: {
        '.ap-header-space': {
          display: 'block',
          position: 'relative',
          width: '100%',
          height: `${height}px`,
          padding: 0,
          margin: 0,
          boxSizing: 'border-box'
        },
        '.ap-header': {
          position: 'fixed',
          left: 0,
          top: 0,
          height: 'auto',
          textAlign: 'left',
          boxSizing: 'border-box',
          width: '100%',
          background: `${alpha(backgroundColor, 0.9)}`,
          zIndex: 9
        },
        '.ap-header-back': {
          position: 'absolute',
          left: 0,
          top: 0,
          right: 0,
          zIndex: -1,
          height: `${height}px`,
          borderBottom: `1px solid ${borderColor}`
        },
        '.ap-header-logo': {
          padding: 0,
          margin: 0,
          display: 'inline-block',
          fontWeight: 100,
          lineHeight: `${height}px`,
          fontSize: `${parseInt(height * 2 / 3)}px`,
          maxWidth: '100%'
        },
        '.ap-header-logo .ap-header-logo-link,.ap-header-logo .ap-header-logo-link:link': {
          display: 'inline-block',
          padding: '0 2px',
          cursor: 'default',
          color: `${color}`,
          lineHeight: `${height}px`,
          maxWidth: '100%',
          textDecoration: 'none',
          wordWrap: 'break-word'
        },
        '.ap-header-logo .ap-header-logo-link:hover': {
          textDecoration: 'none'
        },
        '.ap-header-logo .ap-header-logo-link:active': {
          opacity: 0.8,
          textDecoration: 'none'
        },
        '.ap-header-tab-wrap': {
          display: 'block',
          padding: 0,
          margin: 0,
          borderBottom: `1px solid ${borderColor}`
        },
        '.ap-header-tab': {
          display: 'flex',
          boxSizing: 'border-box',
          fontSize: '14px',
          color: '#888',
          height: `${tabHeight}px`,
          lineHeight: `${tabHeight}px`,
          background: 'transparent'
        },
        '.ap-header-tab-item': {
          flex: 1,
          padding: '0 8px',
          textAlign: 'center',
          boxSizing: 'border-box',
          cursor: 'pointer',
          display: 'inline-block',
          textDecoration: 'none',
          height: `${tabHeight}px`,
          borderColor: 'transparent',
          borderBottomWidth: `${highlightHeight}px`
        },
        '.ap-header-tab-item:hover': {
          textDecoration: 'none'
        },
        '.ap-header-tab-item:active': {
          color: `${highlightColor}`,
          borderColor: 'transparent',
          opacity: 0.66
        },
        '.ap-header-tab-item-selected,.ap-header-tab-item-selected:hover,.ap-header-tab-item-selected:active': {
          color: `${highlightColor}`,
          borderColor: `transparent transparent ${highlightColor}`
        },
        '.ap-header-menu': {
          position: 'relative',
          float: 'right',
          padding: '0px'
        },
        '.ap-header-menu-item': {
          padding: '0 8px',
          margin: '4px 8px',
          fontSize: '12px',
          verticalAlign: 'middle',
          height: `${height - 8}px`,
          lineHeight: `${height - 8}px`
        },
        '.ap-header-dropdown': {
          float: 'right',
          position: 'static'
        },
        '.ap-header-dropdown .ap-dropdown-content': {
          left: 'auto',
          right: 0
        },
        '.ap-header-dropdown-item': {}
      },
      small: {
        '.ap-header-logo': {
          float: 'left'
        },
        '.ap-header-tab': {
          display: 'inline-block',
          margin: '0 16px',
          padding: '0 8px',
          height: `${height}px`,
          lineHeight: `${height}px`
        },

        '.ap-header-tab-item': {
          flex: 'initial',
          height: `${height}px`,
          padding: '0 16px'
        },
        '.ap-header-back': {
          borderBottom: 'none'
        }
      }
    }
  }

})

export default ApHeaderStyle