/**
 * Style for ApImage.
 * @class ApImageStyle
 */

'use strict'

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

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

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

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

Object.assign(ApImageStyle, {
  propTypes: {
    style: types.object,
    backgroundColor: types.string
  },

  defaultProps: {
    style: {},
    backgroundColor: '#DDD',
    spinColor: 'rgba(255,255,255,0.5)'
  },
  styleData (config) {
    let { backgroundColor, spinColor } = config
    let transitionDuration = 100
    return {
      all: {
        '.ap-image': {
          backgroundColor: `${backgroundColor}`,
          overflow: 'hidden',
          textAlign: 'center',
          position: 'relative',
          display: 'inline-flex',
          justifyContent: 'center',
          alignItems: 'center'
        },
        '.ap-image img': {
          opacity: 0,
          transition: `width ${transitionDuration}ms, opacity ${transitionDuration}ms`
        },
        '.ap-image-ready img': {
          opacity: 1
        },
        '.ap-image-content': {
          position: 'relative',
          boxSizing: 'border-box'
        },
        '.ap-image-spinner': {
          position: 'absolute',
          left: 0,
          top: 0,
          right: 0,
          bottom: 0,
          textAlign: 'center',
          display: 'inline-flex',
          zIndex: 8,
          backgroundColor: 'rgba(0,0,0,0.1)',
          color: `${spinColor}`,
          justifyContent: 'center',
          alignItems: 'center'
        },
        '.ap-image-notfound': {
          display: 'block',
          textAlign: 'center',
          color: 'rgba(0,0,0,0.1)',
          fontFamily: 'monospace'
        }
      },
      small: {},
      medium: {},
      large: {}
    }
  }
})

export default ApImageStyle