'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _jsx = function () { var REACT_ELEMENT_TYPE = typeof Symbol === "function" && Symbol.for && Symbol.for("react.element") || 0xeac7; return function createRawReactElement(type, props, key, children) { var defaultProps = type && type.defaultProps; var childrenLength = arguments.length - 3; if (!props && childrenLength !== 0) { props = {}; } if (props && defaultProps) { for (var propName in defaultProps) { if (props[propName] === void 0) { props[propName] = defaultProps[propName]; } } } else if (!props) { props = defaultProps || {}; } if (childrenLength === 1) { props.children = children; } else if (childrenLength > 1) { var childArray = Array(childrenLength); for (var i = 0; i < childrenLength; i++) { childArray[i] = arguments[i + 3]; } props.children = childArray; } return { $$typeof: REACT_ELEMENT_TYPE, type: type, key: key === undefined ? null : '' + key, ref: null, props: props, _owner: null }; }; }();

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _AbstractButton2 = require('../AbstractButton');

var _AbstractButton3 = _interopRequireDefault(_AbstractButton2);

var _Spinner = require('../Spinner');

var _Spinner2 = _interopRequireDefault(_Spinner);

var _View = require('../View');

var _View2 = _interopRequireDefault(_View);

var _theme = require('../const/theme');

var _styles = require('../helpers/styles');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Button = function (_AbstractButton) {
    _inherits(Button, _AbstractButton);

    function Button() {
        _classCallCheck(this, Button);

        return _possibleConstructorReturn(this, (Button.__proto__ || Object.getPrototypeOf(Button)).apply(this, arguments));
    }

    _createClass(Button, [{
        key: '_getChildren',
        value: function _getChildren() {
            var children = this.props.children;

            var result = [];
            var count = _react2.default.Children.count(children);

            if (count === 1) {
                return children;
            }

            _react2.default.Children.forEach(this.props.children, function (item, idx) {
                result.push(item);

                if (idx !== count - 1) {
                    result.push('\xA0');
                }
            });

            return result;
        }
    }, {
        key: 'render',
        value: function render() {
            var props = this.props;

            return _react2.default.createElement(
                'button',
                _extends({}, this.getDefaultRenderProps(), {
                    className: _styles.css.apply(undefined, _toConsumableArray(this.buildStyleList(styles, 'button')).concat([styles.getPreset('size', props.size)])) }),
                _jsx(_View2.default, {
                    styles: [styles.content, props.isWaiting && styles.hiddenContent]
                }, void 0, this._getChildren(), props.isWaiting && _jsx(_View2.default, {
                    className: (0, _styles.css)(styles.spinner)
                }, void 0, _jsx(_Spinner2.default, {
                    size: props.size === 'xs' ? 'tiny' : 'xs',
                    color: props.isDisabled ? _theme.COLOR.MUTED : _theme.COLOR.PRIMARY
                })))
            );
        }
    }]);

    return Button;
}(_AbstractButton3.default);

Button.propTypes = {
    /**
     * Is button disabled.
     */
    isDisabled: _react.PropTypes.bool,
    /**
     * Is button in toggle mod, on click button change checked state.
     */
    isToggleMod: _react.PropTypes.bool,
    /**
     * Is button in checked state, use only for isToggleMod=true
     */
    isChecked: _react.PropTypes.bool,
    /**
     * On focus event handler
     */
    onFocus: _react.PropTypes.func,
    /**
     * On blur event handler
     */
    onBlur: _react.PropTypes.func,
    /**
     * On mouse enter event handler
     */
    onMouseEnter: _react.PropTypes.func,
    /**
     * On focus leave evnet handler
     */
    onMouseLeave: _react.PropTypes.func,
    /**
     * On click event handler
     */
    onClick: _react.PropTypes.func,
    /**
     * On mouse down event handler
     */
    onMouseDown: _react.PropTypes.func,
    /**
     * On mouse up event handler
     */
    onMouseUp: _react.PropTypes.func,
    /**
     * Button size
     */
    size: _react.PropTypes.oneOf(['l', 'm', 's', 'xs']),
    /**
     * Show waiting status
     */
    isWaiting: _react.PropTypes.bool
};
Button.defaultProps = {
    size: 'm'
};
exports.default = Button;


var styles = _styles.StyleSheet.create({
    button: _extends({}, _AbstractButton3.default.BASE_ROOT_STYLE, {
        position: 'relative',
        borderRadius: '4px',

        maxWidth: '100%',
        padding: '6px 12px',

        fontFamily: _theme.FONT.FAMILY,
        fontSize: _theme.FONT.SIZE.BUTTON_TEXT,
        color: _theme.COLOR.TEXT,
        lineHeight: '1.2rem',

        background: 'linear-gradient(to top, rgb(241,242,243) 0%, rgb(255,255,255) 100%)',
        boxShadow: 'inset 0px -2px 0px 0px rgba(27, 42, 48, 0.1), inset 0px -1px 0px 0px #b4bdc0, inset 1px 1px 0px 0px #c6cbce, inset -1px 0px 0px 0px #c6cbce;',
        '&:hover': {
            background: 'linear-gradient(to top, rgb(237,238,239) 0%, rgb(247,248,249) 100%)'
        },
        '&:active': {
            background: 'linear-gradient(to top, rgb(237,238,239) 0%, rgb(247,248,249) 100%)',
            boxShadow: 'inset 0px 2px 0px 0px rgba(27, 42, 48, 0.1), inset 0px -1px 0px 0px #b4bdc0, inset 1px 1px 0px 0px #c6cbce, inset -1px 0px 0px 0px #c6cbce'
        }
    }),
    content: {
        width: '100%',
        height: '100%',
        alignItems: 'center'
    },
    buttonIsFocused: {
        boxShadow: _theme.SHADOW.FOCUS + ', inset 0px -2px 0px 0px rgba(27, 42, 48, 0.1), inset 0px -1px 0px 0px #b4bdc0, inset 1px 1px 0px 0px #c6cbce, inset -1px 0px 0px 0px #c6cbce;'
    },
    buttonIsDisabled: {
        cursor: 'default',
        transition: 'none',
        color: _theme.COLOR.MUTED,
        border: '1px solid #c3cacd',
        boxShadow: 'none',
        background: _theme.COLOR.DISABLED,
        '&:hover': {
            cursor: 'default',
            border: '1px solid #c3cacd',
            boxShadow: 'none',
            background: _theme.COLOR.DISABLED
        },
        '&:active': {
            cursor: 'default',
            border: '1px solid #c3cacd',
            boxShadow: 'none',
            background: _theme.COLOR.DISABLED
        }
    },
    sizeL: {
        padding: '6px 12px',
        minWidth: '36px',
        height: '36px'
    },
    sizeM: {
        padding: '4px 12px',
        minWidth: '32px',
        height: '32px'
    },
    sizeS: {
        padding: '2px 8px',
        minWidth: '28px',
        height: '28px'
    },
    sizeXs: {
        fontSize: _theme.FONT.SIZE.BUTTON_SMALL_TEXT,
        padding: '0 8px',
        minWidth: '24px',
        height: '24px'
    },
    hiddenContent: {
        visibility: 'hidden'
    },
    spinner: {
        position: 'absolute',
        left: '50%',
        top: '50%',
        transform: 'translate3d(-50%, -50%, 0)',
        visibility: 'visible'
    }
});