(function (global, factory) {
  if (typeof define === "function" && define.amd) {
    define(['exports', 'react', '../BaseComponent', 'classnames', 'styled-components', './Tab'], factory);
  } else if (typeof exports !== "undefined") {
    factory(exports, require('react'), require('../BaseComponent'), require('classnames'), require('styled-components'), require('./Tab'));
  } else {
    var mod = {
      exports: {}
    };
    factory(mod.exports, global.react, global.BaseComponent, global.classnames, global.styledComponents, global.Tab);
    global.index = mod.exports;
  }
})(this, function (exports, _react, _BaseComponent2, _classnames, _styledComponents, _Tab) {
  'use strict';

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

  var _react2 = _interopRequireDefault(_react);

  var _BaseComponent3 = _interopRequireDefault(_BaseComponent2);

  var _classnames2 = _interopRequireDefault(_classnames);

  var _styledComponents2 = _interopRequireDefault(_styledComponents);

  var _Tab2 = _interopRequireDefault(_Tab);

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

  function _defineProperty(obj, key, value) {
    if (key in obj) {
      Object.defineProperty(obj, key, {
        value: value,
        enumerable: true,
        configurable: true,
        writable: true
      });
    } else {
      obj[key] = value;
    }

    return 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 _templateObject = _taggedTemplateLiteral(['\n  color: var(--px-tabs-color, black);\n  border: 0;\n  padding: 0;\n  &:focus {\n    outline: var(--px-tab-outline-style, none);\n  }\n'], ['\n  color: var(--px-tabs-color, black);\n  border: 0;\n  padding: 0;\n  &:focus {\n    outline: var(--px-tab-outline-style, none);\n  }\n']),
      _templateObject2 = _taggedTemplateLiteral(['\n  font: inherit;\n  margin: 0;\n  border-bottom: 1px solid var(--px-tab-border-color, gray);\n  padding: 0 1rem 0;\n  display: flex;\n'], ['\n  font: inherit;\n  margin: 0;\n  border-bottom: 1px solid var(--px-tab-border-color, gray);\n  padding: 0 1rem 0;\n  display: flex;\n']),
      _templateObject3 = _taggedTemplateLiteral(['\n  color: var(--px-tab-color, black);\n  cursor: pointer;\n  text-decoration: none;\n  user-select: none;\n\n  &:hover {\n    color: var(--px-tab-color--hover, black);\n  }\n\n  &:active {\n    color: var(--px-tab-color--active, black);\n  }\n'], ['\n  color: var(--px-tab-color, black);\n  cursor: pointer;\n  text-decoration: none;\n  user-select: none;\n\n  &:hover {\n    color: var(--px-tab-color--hover, black);\n  }\n\n  &:active {\n    color: var(--px-tab-color--active, black);\n  }\n']),
      _templateObject4 = _taggedTemplateLiteral(['\n  list-style-type: none;\n  line-height: 1.3;\n  font: inherit;\n  text-align: center;\n  vertical-align: middle;\n  padding-bottom: 10px;\n  margin: 1px 20px 0 0;\n  color: var(--px-tab-color, black);\n\n  ', '\n'], ['\n  list-style-type: none;\n  line-height: 1.3;\n  font: inherit;\n  text-align: center;\n  vertical-align: middle;\n  padding-bottom: 10px;\n  margin: 1px 20px 0 0;\n  color: var(--px-tab-color, black);\n\n  ', '\n']),
      _templateObject5 = _taggedTemplateLiteral(['\n    color: var(--px-tab-color--selected, black);\n    border-bottom: 2px solid var(--px-tab-color--selected, black);\n    font-weight: bold;\n  '], ['\n    color: var(--px-tab-color--selected, black);\n    border-bottom: 2px solid var(--px-tab-color--selected, black);\n    font-weight: bold;\n  ']);

  function _taggedTemplateLiteral(strings, raw) {
    return Object.freeze(Object.defineProperties(strings, {
      raw: {
        value: Object.freeze(raw)
      }
    }));
  }

  var Pane = function Pane(props) {
    return _react2.default.createElement(
      'div',
      null,
      props.children
    );
  };

  var TabsContainer = _styledComponents2.default.div(_templateObject);
  TabsContainer.displayName = 'TabsContainer';

  var TabsContainerNav = _styledComponents2.default.ul(_templateObject2);
  TabsContainerNav.displayName = 'TabsContainerNav';

  var TabTitle = _styledComponents2.default.a(_templateObject3);
  TabTitle.displayName = 'TabTitle';

  var TabItem = _styledComponents2.default.li(_templateObject4, function (props) {
    return props.active && (0, _styledComponents.css)(_templateObject5);
  });

  var Tabs = function (_BaseComponent) {
    _inherits(Tabs, _BaseComponent);

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

      var _this = _possibleConstructorReturn(this, (Tabs.__proto__ || Object.getPrototypeOf(Tabs)).call(this, props, { displayName: 'Tabs' }));

      _this.state = {
        selected: _this.props.selected || 0,
        propForSelect: _this.props.propForSelect || null
      };

      _this._items = [];
      _this._keys = [];
      return _this;
    }

    _createClass(Tabs, [{
      key: 'componentWillReceiveProps',
      value: function componentWillReceiveProps(nextProps) {
        if (nextProps.selected) {
          this.setState({ selected: nextProps.selected });
        }
      }
    }, {
      key: '_getIndexForValue',
      value: function _getIndexForValue(val) {
        return this._keys.indexOf(val);
      }
    }, {
      key: 'handleClick',
      value: function handleClick(index, event) {
        this._log('handleClick', index);
        event.preventDefault();
        var selected = this._getIndexForValue(index);
        if (this.props.onChange) {
          this.props.onChange(index, event);
        }

        this.setState({
          selected: selected
        });
      }
    }, {
      key: '_renderTitles',
      value: function _renderTitles() {
        this._keys = [];
        function labels(child, index) {
          var propForSelect = index;

          this._items.push(child);

          if (this.props.propForSelect) {
            propForSelect = child.props[this.props.propForSelect];
            this._keys.push(propForSelect);
          } else {
            this._keys.push(index);
          }

          var selected = this.state.selected === this._getIndexForValue(propForSelect);
          var baseClasses = (0, _classnames2.default)({ 'iron-selected': selected });
          return _react2.default.createElement(
            TabItem,
            _defineProperty({ key: index, className: baseClasses, active: selected }, 'className', 'px-tab__item'),
            _react2.default.createElement(
              TabTitle,
              { href: '#', onClick: this.handleClick.bind(this, propForSelect) },
              child.props.label
            )
          );
        }
        var children = this.props.children;

        return _react2.default.Children.map(children, labels.bind(this));
      }
    }, {
      key: '_renderContent',
      value: function _renderContent() {
        return this.props.children && this.props.children[this.state.selected];
      }
    }, {
      key: 'render',
      value: function render() {
        var style = this.props.style;

        return _react2.default.createElement(
          TabsContainer,
          { style: style, className: 'px-tabs__container' },
          _react2.default.createElement(
            TabsContainerNav,
            { className: 'px-tabs__nav' },
            this._renderTitles()
          ),
          this._renderContent()
        );
      }
    }]);

    return Tabs;
  }(_BaseComponent3.default);

  Tabs.defaultProps = {
    selected: 0
  };
  Tabs.displayName = 'Tabs';

  exports.default = Tabs;
});