import React from 'react';
import { faChevronLeft } from '@fortawesome/free-solid-svg-icons/faChevronLeft';
import { faChevronRight } from '@fortawesome/free-solid-svg-icons/faChevronRight';
import { FontAwesomeIcon } from '../font-awesome-icon';
import { DropdownMenu } from '../dropdown-menu';
import { useTranslation } from '../hooks/use-translation';
import { DROPDOWN_PLACEMENT_TYPES as DROPDOWN_CAROUSEL_PLACEMENT_TYPES } from '../dropdown/types';
import { BUTTON_TYPES } from '../button';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/* 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
 */
export const DropdownCarousel = ({
  selectedKey,
  options = [],
  isDisabled = false,
  onSelect = () => {},
  testId = 'dropdown-carousel',
  previousText,
  nextText
}) => {
  const {
    t
  } = 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__*/_jsxs("menu", {
    className: "dropdown-carousel",
    "test-id": testId,
    children: [/*#__PURE__*/_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_TYPES.BUTTON,
      children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
        icon: faChevronLeft
      })
    }), /*#__PURE__*/_jsx(DropdownMenu, {
      options: options,
      selectedKey: selectedKey,
      onSelect: onSelect,
      placement: DROPDOWN_CAROUSEL_PLACEMENT_TYPES.BOTTOM,
      triggerTestId: "dropdown-carousel-label",
      triggerClassName: "dropdown-carousel-label",
      contentTestId: "dropdown-carousel-content",
      isDisabled: isDisabled
    }), /*#__PURE__*/_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_TYPES.BUTTON,
      children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
        icon: faChevronRight
      })
    })]
  });
};