/** * Style for ApTheme.
 * @constructor ApThemeStyle
 */

"use strict";

import React, {PropTypes as types} from 'react';
import {ApStyle} from 'apeman-react-style';
import ApBasicThemeStyle from './ap_basic_theme_style';
import ApHandyThemeStyle from './ap_handy_theme_style';
import styleContent from './style_content';


/** @lends ApThemeStyle */
let ApThemeStyle = React.createClass({
    propTypes: {
        scoped: types.bool,
        style: types.object,
        dominant: types.string,
        subordinate: types.string,
        accent: types.string
    },
    getDefaultProps() {
        return {
            scoped: false,
            style: {},
            dominant: '#38E',
            subordinate: '#FFF',
            accent: '#FF3'
        }
    },
    render() {
        let s = this,
            props = s.props;

        let data = {
                '.ap-theme': {}
            },
            smallMediaData = {},
            mediumMediaData = {},
            largeMediaData = {};

        let themedStyle = [
            styleContent(<ApBasicThemeStyle {...props}/>),
            styleContent(<ApHandyThemeStyle {...props}/>)
        ].join('');

        return (
            <ApStyle scoped={props.scoped}
                     data={Object.assign(data, props.style)}
                     smallMediaData={smallMediaData}
                     mediumMediaData={mediumMediaData}
                     largeMediaData={largeMediaData}
            >
                {themedStyle}
                {props.children}
            </ApStyle>
        );
    }
});

module.exports = ApThemeStyle;
