/**
 * @file ButtonRadioSelect component
 * @author liangxiaojun(liangxiaojun@derbysoft.com)
 */

import React, {Component} from 'react';
import {findDOMNode} from 'react-dom';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import RaisedButton from '../RaisedButton';
import Popup from '../Popup';
import ButtonRadioGroup from '../ButtonRadioGroup';
import Theme from '../Theme';

import Util from '../_vendors/Util';

class ButtonRadioSelect extends Component {

    static Theme = Theme;

    constructor(props, ...restArgs) {

        super(props, ...restArgs);

        this.state = {
            popVisible: false
        };

    }

    /**
     * public
     */
    openPopup = e => {
        this.setState({
            popVisible: true
        }, () => {
            const {onOpenPopup, onFocus} = this.props;
            onOpenPopup && onOpenPopup(e);
            onFocus && onFocus(e);
        });
    };

    /**
     * public
     */
    closePopup = e => {
        this.setState({
            popVisible: false
        }, () => {
            const {onClosePopup, onBlur} = this.props;
            onClosePopup && onClosePopup(e);
            onBlur && onBlur(e);
        });
    };

    toggle = e => {

        const {onTriggerClick} = this.props,
            {popVisible} = this.state;

        onTriggerClick && onTriggerClick(popVisible, e);

        if (popVisible) {
            this.closePopup(e);
        } else {
            this.openPopup(e);
        }

    };

    componentDidMount() {
        this.triggerEl = findDOMNode(this.refs.trigger);
    }

    render() {

        const {
                className, triggerClassName, popupClassName, style, theme,
                data
            } = this.props,
            {popVisible} = this.state,

            selectClassName = classNames('button-radio-select', {
                [className]: className
            }),
            btnClassName = classNames('button-radio-select-trigger', {
                activated: popVisible,
                [triggerClassName]: triggerClassName
            }),
            popClassName = classNames('button-radio-select-popup', {
                [popupClassName]: popupClassName
            });

        return (
            <div className={selectClassName}
                 style={style}>

                <RaisedButton ref="trigger"
                              className={btnClassName}
                              theme={theme}
                              onClick={this.toggle}/>

                <Popup className={popClassName}
                       theme={theme}
                       position={Popup.Position.RIGHT}
                       triggerEl={this.triggerEl}
                       visible={popVisible}
                       hasTriangle={false}>
                    <ButtonRadioGroup data={data}
                                      themetheme/>
                </Popup>

            </div>
        );

    }
}

ButtonRadioSelect.propTypes = {

    /**
     * The CSS class name of the root element.
     */
    className: PropTypes.string,

    /**
     * The CSS class name of the trigger element.
     */
    triggerClassName: PropTypes.string,

    /**
     * The CSS class name of the popup element.
     */
    popupClassName: PropTypes.string,

    /**
     * Override the styles of the root element.
     */
    style: PropTypes.object,

    /**
     * The ButtonCheckbox theme.
     */
    theme: PropTypes.oneOf(Util.enumerateValue(Theme)),

    /**
     * The ButtonCheckbox activated theme.
     */
    activatedTheme: PropTypes.oneOf(Util.enumerateValue(Theme)),

    /**
     * The hidden input name for form submit.
     */
    name: PropTypes.string,

    /**
     * Data for ButtonRadioGroup.
     */
    data: PropTypes.arrayOf(PropTypes.shape({

        /**
         * The className of RaisedButton.
         */
        className: PropTypes.string,

        /**
         * The style of RaisedButton.
         */
        style: PropTypes.object,

        /**
         * The label of RaisedButton.
         */
        label: PropTypes.any,

        /**
         * The value of RaisedButton.
         */
        value: PropTypes.any,

        /**
         * If true, the RaisedButton will be disabled.
         */
        disabled: PropTypes.bool

    })).isRequired,

    /**
     * Set one of the button activation.
     */
    value: PropTypes.any,

    /**
     * If true, the ButtonRadioGroup will be disabled.
     */
    disabled: PropTypes.bool,

    /**
     * Callback function fired when click RaisedButton.
     */
    onChange: PropTypes.func

};

ButtonRadioSelect.defaultProps = {

    theme: Theme.DEFAULT,
    activatedTheme: Theme.PRIMARY,

    value: '',
    disabled: false

};

export default ButtonRadioSelect;

@@ -630,32 +630,64 @@
 opVisible: false
+,%0A            value: props.value
 %0A        %7D;%0A%0A   
@@ -1533,24 +1533,167 @@
  %7D%0A%0A    %7D;%0A%0A
+    changeHandler = value =%3E %7B%0A        this.setState(%7B%0A            value%0A        %7D, () =%3E %7B%0A            this.closePopup();%0A        %7D);%0A    %7D;%0A%0A
     componen
@@ -2970,16 +2970,72 @@
 =%7Bfalse%7D
+%0A                       onRequestClose=%7Bthis.closePopup%7D
 %3E%0A      
@@ -3121,21 +3121,92 @@
    theme
+=%7B
 theme
+%7D%0A                                      onChange=%7Bthis.changeHandler%7D
 /%3E%0A     
@@ -4825,16 +4825,318 @@
 .bool,%0A%0A
+    /**%0A     * Callback function fired when the popup is open.%0A     */%0A    onOpenPopup: PropTypes.func,%0A%0A    /**%0A     * Callback function fired when the popup is close.%0A     */%0A    onClosePopup: PropTypes.func,%0A%0A    onFocus: PropTypes.func,%0A    onBlur: PropTypes.func,%0A    onTriggerClick: Popup.func,%0A%0A
     /**%0A

update ButtonRadioSelect