/**
 * Style for ApCheckbox.
 * @constructor ApCheckboxStyle
 */

"use strict";

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

/** @lends ApCheckboxStyle */
let ApCheckboxStyle = React.createClass({
    propTypes: {
        scope: types.bool,
        style: types.object,
        highlightColor: types.string
    },
    getDefaultProps() {
        return {
            scope: false,
            style: {},
            highlightColor: '#38E'
        }
    },
    render() {
        let s = this,
            props = s.props;

        let highlightColor = props.highlightColor;

        let data = {
                '.ap-checkbox': {
                    display: `inline-block`,
                    padding: `0 4px`,
                    cursor: `pointer`,
                    position: `relative`
                },
                '.ap-checkbox:hover': {
                    opacity: 0.9
                },
                '.ap-checkbox:active': {
                    opacity: 0.75
                },
                '.ap-checkbox-input': {
                    display: `inline-block`,
                    padding: `0 2px`,
                    position: `relative`,
                    top: `-2px`,
                    opacity: 0,
                    zIndex: 8
                },
                '.ap-checkbox-title': {},
                '.ap-checkbox-icon': {
                    position: `absolute`,
                    left: 2,
                    top: 0
                },
                '.ap-checkbox:hover .ap-checkbox-icon': {
                    color: `${highlightColor}`
                },
                '.ap-checkbox:active .ap-checkbox-icon': {
                    opacity: 0.5
                },
                '.ap-checkbox-icon-checked': {
                    color: `${highlightColor}`
                }
            },
            smallMediaData = {},
            mediumMediaData = {},
            largeMediaData = {};
        return (
            <ApStyle scoped={props.scoped}
                     data={Object.assign(data, props.style)}
                     smallMediaData={smallMediaData}
                     mediumMediaData={mediumMediaData}
                     largeMediaData={largeMediaData}
            >{props.children}</ApStyle>
        );
    }
});

module.exports = ApCheckboxStyle;
