/**
 * Style for ApForm.
 * @class ApFormStyle
 */

'use strict'

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

/** @lends ApFormStyle */
const ApFormStyle = React.createClass({
  propTypes: {
    style: types.object,
    maxWidth: types.number
  },
  getDefaultProps () {
    return {
      style: {},
      errorColor: '#E11',
      errorBackgroundColor: '#FFF0F0'
    }
  },
  statics: {
    styleData (config) {
      let { errorColor, errorBackgroundColor } = config
      return {
        all: {
          '.ap-form': {
            position: 'relative',
            margin: 0
          },
          '.ap-form-centered': {
            margin: '8px auto',
            maxWidth: ApStyle.CONTENT_WIDTH
          },
          '.ap-form-dummy-input': {
            visibility: 'hidden',
            zIndex: -999,
            display: 'none',
            width: 0,
            height: 0,
            opacity: 0
          },
          '.ap-form-error-list-empty': {
            display: 'none !important'
          },
          '.ap-form-error-list': {
            fontSize: 'smaller',
            paddingLeft: '16px',
            color: errorColor
          },
          '.ap-form-error-list-item': {}
        }
      }
    }
  },
  render () {
    const s = this
    let { props } = s

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

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

export default ApFormStyle