import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import React from 'react';
import { Cycler as Component } from './component';
export var CyclerContainer =
/*#__PURE__*/
function (_React$Component) {
  _inherits(CyclerContainer, _React$Component);

  function CyclerContainer(props) {
    var _this;

    _classCallCheck(this, CyclerContainer);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(CyclerContainer).call(this, props));
    _this.state = void 0;

    _this.up = function () {
      if (_this.isSlidableUp) {
        _this.setState({
          position: _this.state.position + 1
        });
      }
    };

    _this.down = function () {
      if (_this.isSlidableDown) {
        _this.setState({
          position: _this.state.position - 1
        });
      }
    };

    _this.isActive = function (index) {
      return Math.abs(_this.state.position) + 1 === index;
    };

    _this.handleItemClick = function (id) {
      return function () {
        console.log("Item ".concat(id, " clicked."));
      };
    };

    _this.state = {
      position: 0
    };
    return _this;
  }

  _createClass(CyclerContainer, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var visible = CyclerContainer.visible;
      this.setState({
        position: this.count / 2 - visible
      });
    }
  }, {
    key: "render",
    value: function render() {
      var position = this.state.position;
      var items = this.props.items;
      return React.createElement(Component, {
        position: position,
        items: items,
        up: this.up,
        down: this.down,
        isActive: this.isActive,
        handleItemClick: this.handleItemClick
      });
    }
  }, {
    key: "isSlidableUp",
    get: function get() {
      return 0 > this.state.position;
    }
  }, {
    key: "count",
    get: function get() {
      return this.props.items.length;
    }
  }, {
    key: "isSlidableDown",
    get: function get() {
      var visible = CyclerContainer.visible;
      return this.count - visible > -this.state.position;
    }
  }]);

  return CyclerContainer;
}(React.Component);
CyclerContainer.visible = 3;