"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DropdownCarousel = void 0;
var _react = _interopRequireDefault(require("react"));
var _faChevronLeft = require("@fortawesome/free-solid-svg-icons/faChevronLeft");
var _faChevronRight = require("@fortawesome/free-solid-svg-icons/faChevronRight");
var _fontAwesomeIcon = require("../font-awesome-icon");
var _dropdownMenu = require("../dropdown-menu");
var _useTranslation = require("../hooks/use-translation");
var _types = require("../dropdown/types");
var _button = require("../button");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/* USAGE EXAMPLE
  <DropdownCarousel
    isDisabled={isDisabled}
    onSelect={onSelect}
    options={options}
    selectedKey={selectedKey}
  />
*/

/** DropdownCarousel allows navigate through different views
 * [CAPITALIZATION] Use title case for labels, no colon at the end
 * [CAPITALIZATION] Use sentence case for selection
 */
const DropdownCarousel = ({
  selectedKey,
  options = [],
  isDisabled = false,
  onSelect = () => {},
  testId = 'dropdown-carousel',
  previousText,
  nextText
}) => {
  const {
    t
  } = (0, _useTranslation.useTranslation)();

  // empty list
  if (!options.length) {
    return null;
  }
  const availableOptionsCount = options.filter(option => !option.disabled).length;
  const isNavigationDisabled = availableOptionsCount <= 1 || isDisabled;
  const currentIndex = options.findIndex(option => option.key === selectedKey) || 0;
  const lastIndex = options.length - 1;
  const handleOnClick = optionIndex => {
    if (isNavigationDisabled) {
      return;
    }
    onSelect(options[optionIndex]);
  };
  const getPrevIndex = (index = currentIndex) => {
    const prev = index > 0 ? index - 1 : lastIndex;
    return options[prev].disabled ? getPrevIndex(prev) : prev;
  };
  const getNextIndex = (index = currentIndex) => {
    const next = (index + 1) % options.length;
    return options[next].disabled ? getNextIndex(next) : next;
  };
  const prevIndex = isNavigationDisabled ? currentIndex : getPrevIndex();
  const nextIndex = isNavigationDisabled ? currentIndex : getNextIndex();
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("menu", {
    className: "dropdown-carousel",
    "test-id": testId,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
      "aria-label": isNavigationDisabled ? previousText ?? t('Previous') : String(options[prevIndex].title),
      className: "button command dropdown-carousel-arrow-button",
      "test-id": "dropdown-carousel-prev",
      onClick: () => handleOnClick(prevIndex),
      disabled: isNavigationDisabled,
      type: _button.BUTTON_TYPES.BUTTON,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
        icon: _faChevronLeft.faChevronLeft
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdownMenu.DropdownMenu, {
      options: options,
      selectedKey: selectedKey,
      onSelect: onSelect,
      placement: _types.DROPDOWN_PLACEMENT_TYPES.BOTTOM,
      triggerTestId: "dropdown-carousel-label",
      triggerClassName: "dropdown-carousel-label",
      contentTestId: "dropdown-carousel-content",
      isDisabled: isDisabled
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
      "aria-label": isNavigationDisabled ? nextText ?? t('Next') : String(options[nextIndex].title),
      className: "button command dropdown-carousel-arrow-button",
      "test-id": "dropdown-carousel-next",
      onClick: () => handleOnClick(nextIndex),
      disabled: isNavigationDisabled,
      type: _button.BUTTON_TYPES.BUTTON,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
        icon: _faChevronRight.faChevronRight
      })
    })]
  });
};
exports.DropdownCarousel = DropdownCarousel;