'use strict';

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

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _recompose = require('recompose');

var _themeGet = require('../../extensions/themeGet');

var _themeGet2 = _interopRequireDefault(_themeGet);

var _lodash = require('lodash');

var _StyledToggleButton = require('./styles/StyledToggleButton');

var _StyledToggleButton2 = _interopRequireDefault(_StyledToggleButton);

var _ColorfulButton = require('./styles/ColorfulButton');

var _ColorfulButton2 = _interopRequireDefault(_ColorfulButton);

var _SmallButton = require('./styles/SmallButton');

var _SmallButton2 = _interopRequireDefault(_SmallButton);

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

/**
 * **ToggleButton** is a simple styled button with some extra functionality built-in for handling selection. Control
 * it by setting `selected`, then use its `onClick` or `onSelect/onDeselect` handlers to implement selection or hook
 * into the [Selectable](/#!/Selectable) behavior. Set `name` to keep track of which button was pressed when a
 * click handler fires.
 */
var ToggleButton = function (_React$PureComponent) {
  (0, _inherits3.default)(ToggleButton, _React$PureComponent);

  function ToggleButton() {
    var _ref;

    var _temp, _this, _ret;

    (0, _classCallCheck3.default)(this, ToggleButton);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = ToggleButton.__proto__ || (0, _getPrototypeOf2.default)(ToggleButton)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      internalHovered: false
    }, _this.handleClick = function (ev) {
      ev.preventDefault();
      var _this2 = _this,
          _this2$props = _this2.props,
          onClick = _this2$props.onClick,
          onDeselect = _this2$props.onDeselect,
          onSelect = _this2$props.onSelect,
          selected = _this2$props.selected,
          name = _this2$props.name;

      onClick(name, selected);
      selected ? onDeselect(name) : onSelect(name);
    }, _this.handleMouseEnter = function () {
      return _this.setState({ internalHovered: true });
    }, _this.handleMouseLeave = function () {
      return _this.setState({ internalHovered: false });
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(ToggleButton, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          Button = _props.Button,
          onClick = _props.onClick,
          hovered = _props.hovered,
          rest = (0, _objectWithoutProperties3.default)(_props, ['Button', 'onClick', 'hovered']),
          internalHovered = this.state.internalHovered,
          handleClick = this.handleClick;

      return _react2.default.createElement(Button, (0, _extends3.default)({
        onMouseEnter: this.handleMouseEnter,
        onMouseLeave: this.handleMouseLeave,
        onMouseUp: this.handleMouseLeave,
        onClick: handleClick,
        hovered: hovered !== null && hovered != undefined ? hovered : internalHovered
      }, rest));
    }
  }]);
  return ToggleButton;
}(_react2.default.PureComponent);

ToggleButton.propTypes = {
  /**
   * Callback when the toggle is clicked. Called with the signature `(name, selected)`.
   */
  onClick: _propTypes2.default.func,
  /**
   * Callback when the toggle is deselected. Called with the signature `(name)`.
   */
  onDeselect: _propTypes2.default.func,
  /**
   * Callback when the toggle is selected. Called with the signature `(name)`.
   */
  onSelect: _propTypes2.default.func,
  /**
   * Has no effect on rendering; acts as a key that you can use to identify the
   * **ToggleButton** when it invokes `onClick`, `onSelect`, or `onDeselect`.
   */
  name: _propTypes2.default.any.isRequired,
  /**
   * Whether the button is selected or not
   */
  selected: _propTypes2.default.bool,
  /**
   * Whether the button is hovered or not
   */
  hovered: _propTypes2.default.bool
};
ToggleButton.Small = (0, _recompose.defaultProps)({
  Button: _SmallButton2.default
})(ToggleButton);
ToggleButton.Colorful = (0, _recompose.defaultProps)({
  Button: _ColorfulButton2.default
})(ToggleButton);
ToggleButton.defaultProps = {
  onClick: _lodash.noop,
  onDeselect: _lodash.noop,
  onSelect: _lodash.noop,
  selected: false,
  hovered: null,
  Button: _StyledToggleButton2.default
};
exports.default = ToggleButton;