(function (global, factory) {
	if (typeof define === "function" && define.amd) {
		define(['exports', 'react', '../BaseComponent', './px-nav-drawer.scss', 'classnames'], factory);
	} else if (typeof exports !== "undefined") {
		factory(exports, require('react'), require('../BaseComponent'), require('./px-nav-drawer.scss'), require('classnames'));
	} else {
		var mod = {
			exports: {}
		};
		factory(mod.exports, global.react, global.BaseComponent, global.pxNavDrawer, global.classnames);
		global.pxNavDrawer = mod.exports;
	}
})(this, function (exports, _react, _BaseComponent, _pxNavDrawer, _classnames) {
	'use strict';

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

	var _react2 = _interopRequireDefault(_react);

	var _BaseComponent2 = _interopRequireDefault(_BaseComponent);

	var _pxNavDrawer2 = _interopRequireDefault(_pxNavDrawer);

	var _classnames2 = _interopRequireDefault(_classnames);

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

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

	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;
		};
	}();

	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 NavDrawer = function (_React$Component) {
		_inherits(NavDrawer, _React$Component);

		function NavDrawer(props) {
			_classCallCheck(this, NavDrawer);

			var _this = _possibleConstructorReturn(this, (NavDrawer.__proto__ || Object.getPrototypeOf(NavDrawer)).call(this, props));

			_this.state = {
				opened: props.opened || false,
				persistent: props.persistent || false
			};
			_this.close = _this.close.bind(_this);
			return _this;
		}

		_createClass(NavDrawer, [{
			key: 'componentDidMount',
			value: function componentDidMount() {
				this.hasUnprefixedTransform = 'transform' in document.documentElement.style;

				this.refs.sideNavContent.addEventListener('click', function (e) {
					e.stopPropagation();
				});
				if (this.hasUnprefixedTransform) {
					this._setupTouchHandlers();
				}
			}
		}, {
			key: 'componentWillReceiveProps',
			value: function componentWillReceiveProps(nextProps) {}
		}, {
			key: 'getWidth',
			value: function getWidth() {
				return this.refs.sideNavContent.offsetWidth;
			}
		}, {
			key: '_setupTouchHandlers',
			value: function _setupTouchHandlers() {
				this.touchStartX = null;
				this.sideNavTransform = null;
				this.refs.sideNavContent.addEventListener('touchstart', this.onSideNavTouchStart.bind(this));
				this.refs.sideNavContent.addEventListener('touchmove', this.onSideNavTouchMove.bind(this));
				this.refs.sideNavContent.addEventListener('touchend', this.onSideNavTouchEnd.bind(this));
			}
		}, {
			key: 'onSideNavTouchStart',
			value: function onSideNavTouchStart(e) {
				e.preventDefault();
				this.touchStartX = e.touches[0].pageX;
			}
		}, {
			key: 'onSideNavTouchMove',
			value: function onSideNavTouchMove(e) {
				e.preventDefault();
				var newTouchX = e.touches[0].pageX;
				this.sideNavTransform = Math.min(0, newTouchX - this.touchStartX);
				this.refs.sideNavContent.style.transform = 'translateX(' + this.sideNavTransform + 'px)';
			}
		}, {
			key: 'onSideNavTouchEnd',
			value: function onSideNavTouchEnd(e) {
				var TOUCH_SLOP = 8 * window.devicePixelRatio * 3;
				if (this.sideNavTransform < -TOUCH_SLOP) {
					this.close();
					return;
				}
				this.open();
			}
		}, {
			key: 'isOpen',
			value: function isOpen() {
				return this.refs.rootElement.classList.contains('nav-drawer--visible');
			}
		}, {
			key: 'toggle',
			value: function toggle() {
				if (this.isOpen()) {
					this.close();
				} else {
					this.open();
				}
			}
		}, {
			key: 'close',
			value: function close() {
				this.refs.baseElement.classList.remove('px-nav-drawer--is-visible');
				this.refs.rootElement.classList.remove('nav-drawer--visible');
				this.refs.sideNavContent.classList.add('nav-drawer__content--animatable');
				if (this.hasUnprefixedTransform) {
					this.refs.sideNavContent.style.transform = 'translateX(-102%)';
				} else {
					this.refs.sideNavContent.classList.remove('nav-drawer--visible');
				}
				if (this.props.onClose) {
					this.props.onClose();
				}

				return false;
			}
		}, {
			key: 'open',
			value: function open() {
				var _this2 = this;

				this.refs.rootElement.classList.add('nav-drawer--visible');
				if (this.hasUnprefixedTransform) {
					var onSideNavTransitionEnd = function onSideNavTransitionEnd(e) {
						_this2.refs.sideNavBody.focus();
						_this2.refs.sideNavContent.classList.remove('nav-drawer__content--animatable');
						_this2.refs.sideNavContent.removeEventListener('transitionend', onSideNavTransitionEnd);
					};

					this.refs.sideNavContent.classList.add('nav-drawer__content--animatable');
					this.refs.sideNavContent.addEventListener('transitionend', onSideNavTransitionEnd);
					requestAnimationFrame(function () {
						_this2.refs.sideNavContent.style.transform = 'translateX(0px)';
					});
				} else {
					this.refs.sideNavContent.classList.add('nav-drawer--visible');
				}
				if (this.props.onOpen) {
					this.props.onOpen();
				}
			}
		}, {
			key: 'render',
			value: function render() {
				var _this3 = this;

				var _props = this.props,
				    _props$title = _props.title,
				    title = _props$title === undefined ? 'AppNav' : _props$title,
				    nav = _props.nav,
				    opened = _props.opened,
				    persistent = _props.persistent,
				    children = _props.children;


				var baseClasses = (0, _classnames2.default)('px-nav-drawer', { 'px-nav-drawer--is-visible': opened }, { 'px-nav-drawer--is-persistent': persistent });

				var rootElementClasses = (0, _classnames2.default)('nav-drawer', 'js-nav-drawer', { 'nav-drawer--persistent': persistent });

				var sideNavContentClasses = (0, _classnames2.default)('nav-drawer__content', 'js-nav-drawer-content');

				return _react2.default.createElement(
					'div',
					{ className: baseClasses, ref: 'baseElement' },
					_react2.default.createElement(
						'section',
						{ className: rootElementClasses, ref: 'rootElement', onClick: this.close },
						_react2.default.createElement(
							'div',
							{ className: sideNavContentClasses, ref: 'sideNavContent', onClick: this.close },
							_react2.default.createElement(
								'div',
								{ className: 'nav-drawer__header' },
								_react2.default.createElement(
									'h1',
									{ className: 'nav-drawer__title' },
									title
								)
							),
							_react2.default.createElement(
								'nav',
								{ className: 'nav-drawer__body', ref: 'sideNavBody' },
								children,
								nav && nav.map(function (item) {
									return _react2.default.createElement(
										'a',
										{ href: item.url, role: 'tab', activeClassName: 'active', className: 'nav-drawer__link' },
										_react2.default.createElement(
											'span',
											{ onClick: function onClick(e) {
													return _this3.close(e);
												} },
											item.label
										)
									);
								})
							)
						)
					),
					_react2.default.createElement(
						'style',
						{ jsx: true },
						_pxNavDrawer2.default
					)
				);
			}
		}]);

		return NavDrawer;
	}(_react2.default.Component);

	NavDrawer.defaultProps = {
		opened: false,
		persistent: false
	};
	exports.default = NavDrawer;
});