'use strict';

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

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 _lodash = require('lodash');

var _lodash2 = _interopRequireDefault(_lodash);

var _animationTimer = require('animation-timer');

var _functionalEasing = require('functional-easing');

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

var Container = _styledComponents2.default.div.withConfig({
  displayName: 'Expand__Container'
})(['overflow:hidden;width:100%;height:100%;']);
var Content = _styledComponents2.default.div.withConfig({
  displayName: 'Expand__Content'
})(['overflow:hidden;width:100%;height:100%;']);

/**
 * FIXME: migrate this to use react-movement!
 */

var Expand = function (_React$Component) {
  (0, _inherits3.default)(Expand, _React$Component);

  function Expand() {
    var _ref;

    var _temp, _this, _ret;

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

    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 = Expand.__proto__ || (0, _getPrototypeOf2.default)(Expand)).call.apply(_ref, [this].concat(args))), _this), _this.updateSize = function () {
      var _this$props = _this.props,
          direction = _this$props.direction,
          duration = _this$props.duration,
          animate = _this$props.animate;

      var content = _this._content;

      if (!animate) {
        content.style.width = 'auto';
        content.style.height = 'auto';
        return;
      }

      var naturalHeight = content.scrollHeight;
      var naturalWidth = content.scrollWidth;
      var easer = new _functionalEasing.Easer().using('cubic');

      if (direction === 'vertical' || direction === 'both') {
        content.style.height = '0px';
      }
      if (direction === 'horizontal' || direction === 'both') {
        content.style.width = '0px';
      }

      new _animationTimer.AnimationTimer().duration(duration).on('tick', easer(function (percent) {
        if (direction === 'vertical' || direction === 'both') {
          content.style.height = naturalHeight * percent + 'px';
        }
        if (direction === 'horizontal' || direction === 'both') {
          content.style.width = naturalWidth * percent + 'px';
        }
      })).on('stop', function () {
        content.style.width = '';
        content.style.height = '';
      }).play();
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(Expand, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.updateSize();

      window.addEventListener('resize', _lodash2.default.debounce(this.updateSize, 300));
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate() {
      this.updateSize();
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          children = _props.children,
          id = _props.id,
          className = _props.className;

      return _react2.default.createElement(
        Container,
        { id: id, className: className },
        _react2.default.createElement(
          Content,
          {
            innerRef: function innerRef(el) {
              _this2._content = el;
            }
          },
          children
        )
      );
    }
  }]);
  return Expand;
}(_react2.default.Component);

Expand.propTypes = {
  /**
   * Whether or not the expansion should be animated.
   */
  animate: _propTypes2.default.bool,
  /**
   * A direction to expand in. [vertical, horizontal, both].
   */
  direction: _propTypes2.default.oneOf(['vertical', 'horizontal', 'both']),
  /**
   * Contents of the expanding area.
   */
  children: _propTypes2.default.node.isRequired,
  /**
   * Milliseconds to spend expanding.
   */
  duration: _propTypes2.default.number,
  /**
   * Adds an id to the container.
   */
  id: _propTypes2.default.string,
  /**
   * Adds a class name to the container.
   */
  className: _propTypes2.default.string
};
Expand.defaultProps = {
  animate: true,
  direction: 'vertical',
  duration: 200,
  id: null,
  className: null
};
exports.default = Expand;