/**
 * Style for ApSpinner.
 * @class ApSpinnerStyle
 */

'use strict'

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

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

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

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

Object.assign(ApSpinnerStyle, {
  propTypes: {
    type: types.string,
    style: types.object
  },
  defaultProps: {
    type: 'text/css',
    style: {}
  },
  styleData (config) {
    return {
      all: {
        '.ap-spinner': {
          textAlign: 'center',
          display: 'none'
        },
        '.ap-spinner.ap-spinner-enabled': {
          display: 'inline-flex',
          justifyContent: 'center',
          alignItems: 'center',
          width: '100%',
          height: '100%'
        },
        '.ap-spinner-icon': {
          display: 'inline-block',
          margin: '0 4px',
          transition: 'opacity 100ms',
          opacity: 1
        },
        '.ap-spinner-cover': {
          position: 'absolute',
          left: 0,
          top: 0,
          right: 0,
          bottom: 0,
          zIndex: 4,
          justifyContent: 'center',
          alignItems: 'center',
          background: ApStyle.COVER_BACKGROUND,
          color: ApStyle.COVER_COLOR
        }
      },
      small: {},
      medium: {},
      large: {}
    }
  }
})

export default ApSpinnerStyle