import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronUp, faChevronDown } from '@fortawesome/free-solid-svg-icons';
import cx from 'classnames';
var HEIGHT = 25;
export var Cycler = function Cycler(_ref) {
  var items = _ref.items,
      position = _ref.position,
      up = _ref.up,
      down = _ref.down,
      isActive = _ref.isActive,
      handleItemClick = _ref.handleItemClick;
  return React.createElement("div", {
    className: "cycler"
  }, React.createElement("button", {
    onClick: up,
    className: "btn btn-link link"
  }, React.createElement(FontAwesomeIcon, {
    icon: faChevronUp,
    size: "2x",
    className: "up"
  })), React.createElement("div", {
    className: "wrapper"
  }, React.createElement("ul", {
    className: "items",
    style: {
      top: "".concat(position * HEIGHT, "px")
    }
  }, items.map(function (item, index) {
    return React.createElement("li", {
      key: item.id,
      className: cx('item', {
        active: isActive(index)
      })
    }, React.createElement("button", {
      className: "btn btn-link link",
      onClick: handleItemClick(item.id)
    }, item.title));
  }))), React.createElement("button", {
    className: "btn btn-link down",
    onClick: down
  }, React.createElement(FontAwesomeIcon, {
    icon: faChevronDown,
    size: "2x",
    className: "down"
  })));
};