'use strict';

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

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 _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _ShowMore = require('./ShowMore');

var _ShowMore2 = _interopRequireDefault(_ShowMore);

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

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 ListContainer = _styledComponents2.default.ul.withConfig({
  displayName: 'List__ListContainer'
})(['display: flex;flex-direction: column;list-style-type: none;margin: 0;padding: 0;&::-webkit-scrollbar-thumb {background: ', ';}&::-webkit-scrollbar-track {background: ', ';}'], function (_ref) {
  var theme = _ref.theme;
  return theme.colors.gutter;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.colors.grayDark;
});

var List = function (_React$Component) {
  _inherits(List, _React$Component);

  function List() {
    var _ref3;

    var _temp, _this, _ret;

    _classCallCheck(this, List);

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

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref3 = List.__proto__ || Object.getPrototypeOf(List)).call.apply(_ref3, [this].concat(args))), _this), _this.renderPrevious = function () {
      var _this$props = _this.props,
          hasPreviousPage = _this$props.hasPreviousPage,
          onPreviousPageClicked = _this$props.onPreviousPageClicked;

      if (hasPreviousPage) {
        return _react2.default.createElement(
          _ShowMore2.default,
          { onClick: onPreviousPageClicked },
          'Show Previous'
        );
      }

      return null;
    }, _this.renderNext = function () {
      var _this$props2 = _this.props,
          hasNextPage = _this$props2.hasNextPage,
          onNextPageClicked = _this$props2.onNextPageClicked;

      if (hasNextPage) {
        return _react2.default.createElement(
          _ShowMore2.default,
          { onClick: onNextPageClicked },
          'Show Next'
        );
      }

      return null;
    }, _this.renderItems = function () {
      var selectedIndex = _this.props.selectedIndex;


      return _react2.default.Children.map(_this.props.children.filter(function (child) {
        return child !== null;
      }), function (listItem, idx) {
        return _react2.default.cloneElement(listItem, { key: idx, active: idx === selectedIndex });
      });
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(List, [{
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        ListContainer,
        null,
        this.renderPrevious(),
        this.renderItems(),
        this.renderNext()
      );
    }
  }]);

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

List.propTypes = {
  selectedIndex: _propTypes2.default.number,
  children: _propTypes2.default.node.isRequired,
  hasNextPage: _propTypes2.default.bool,
  hasPreviousPage: _propTypes2.default.bool,
  onNextPageClicked: _propTypes2.default.func,
  onPreviousPageClicked: _propTypes2.default.func
};
List.defaultProps = {
  selectedIndex: -1,
  hasNextPage: false,
  hasPreviousPage: false,
  onNextPageClicked: function onNextPageClicked() {
    return null;
  },
  onPreviousPageClicked: function onPreviousPageClicked() {
    return null;
  }
};


List.usage = '\n# List\n\nLays out items vertically and provides selection context. Does not do scrolling.\n\nIf you pass the `selectedIndex` prop, the child component which matches that index will receive an `active=true` prop when rendering. Use this to show selected state. Before relying on list selection state, though, consider whether your list shouldn\'t instead be linked to your router, so that each item is a unique route. If you go that direction, you can have the items be `<Route/>` components from React Router, and have them utilize RR\'s built-in route matching logic to determine rendering appearance.\n\n```\n<List selectedIndex={1}>\n  <ListItem>One</ListItem>\n  <ListItem>Two</ListItem>\n</List>\n```\n';

exports.default = List;