/**
 * Style for ApSign.
 * @class ApSignStyle
 */

'use strict'

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

/** @lends ApSignStyle */
const ApSignStyle = React.createClass({
  propTypes: {
    style: types.object
  },
  getDefaultProps () {
    return {
      style: {}
    }
  },
  statics: {
    styleData (config) {
      return {
        all: {
          '.ap-sign': {},
          '.ap-signin-form': {
            maxWidth: '396px'
          },
          '.ap-signin-form-button-field': {
            margin: '8px 0',
            padding: '0 8px'
          },
          '.ap-signin-form-sub-field': {
            textAlign: 'right',
            fontSize: 'smaller'
          },
          '.ap-signin-form-menu-field': {
            padding: '4px 8px'
          },
          '.ap-signin-form-menu-button-row': {
            fontSize: '14px',
            width: '100%',
            margin: '8px 0'
          },
          '.ap-signin-form-action-button-row': {
            padding: '0 4px'
          },
          '.ap-signin-form-action-button-row .ap-icon-button-text': {
            fontSize: '11px'
          },
          '.ap-signup-form-button-field': {
            margin: '8px 0',
            padding: '0 8px'
          }
        }
      }
    }
  },
  render () {
    const s = this
    let { props } = s

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

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

export default ApSignStyle