import React, { useState, useCallback } from 'react';
import classNames from 'classnames';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
import { ClosableTab } from './closable-tab';
import { useTranslation } from '../hooks/use-translation';
import { Button, ACCENT_TYPES, BUTTON_SIZES, BUTTON_TOOLTIP_PLACEMENT_TYPES } from '../button';
import { FontAwesomeIcon } from '../font-awesome-icon';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/** ClosableTabs displays a set of closable tabs, which can be rearranged by drag-n-drop
 * @midnight-gray-supported
 * @alpine-light-supported
 */
export const ClosableTabs = ({
  tabs,
  selected,
  className,
  tooltipClassName,
  tabsListClassName,
  tabsListRef,
  testId,
  isDisabled = false,
  autoSelectTabOnClose = false,
  onClickTab,
  onSelect,
  onCreate,
  canReorderByDragging = false,
  onReorderTabs,
  onCreateIsDisabled = false,
  onCreateTooltipText = '',
  onCreateTooltipPlacement = BUTTON_TOOLTIP_PLACEMENT_TYPES.TOP,
  onClose,
  groupIdentifier = '',
  rightSideActions,
  children,
  closeTabText,
  createTabText
}) => {
  const {
    t
  } = useTranslation();
  const [isAnyItemDragging, setIsAnyItemDragging] = useState(false);
  const dndProviderProps = {
    backend: HTML5Backend
  };
  function getIndexByKey(key) {
    return tabs.findIndex(tab => tab.key === key);
  }
  const handleItemMove = useCallback((dragIndex, hoverIndex) => {
    const nextData = [...tabs];
    const draggedItem = nextData[dragIndex];
    nextData.splice(dragIndex, 1);
    nextData.splice(hoverIndex, 0, draggedItem);
    if (onReorderTabs) {
      onReorderTabs(nextData);
    }
  }, [tabs, onReorderTabs]);
  const onCloseClick = tab => {
    if (autoSelectTabOnClose && selected?.key === tab.key) {
      const index = tabs.findIndex(item => item.key === tab.key);
      const lastIndex = tabs.length - 1;
      const newIndex = index === lastIndex ? index - 1 : index + 1;
      const newActive = (newIndex > -1 ? tabs[newIndex] : tabs[lastIndex]) ?? null;
      onSelect(newActive?.key !== tab.key ? newActive : null);
    }
    onClose(tab);
  };
  return /*#__PURE__*/_jsx(DndProvider, {
    ...dndProviderProps,
    children: /*#__PURE__*/_jsxs("section", {
      className: classNames('closable-tabs', {
        'closable-tabs-no-tabs': tabs.length === 0
      }, className),
      "test-id": testId,
      children: [/*#__PURE__*/_jsxs("header", {
        className: "closable-tabs-header",
        children: [/*#__PURE__*/_jsx("div", {
          className: classNames('closable-tabs-list', tabsListClassName),
          "test-id": `${testId}-tabs-wrapper`,
          ref: tabsListRef,
          children: tabs.map((tab, index) => /*#__PURE__*/_jsx(ClosableTab, {
            tab: {
              ...tab,
              index
            },
            index: index,
            tooltipClassName: tooltipClassName,
            isActive: selected?.key === tab.key,
            isDisabled: isDisabled,
            onClick: onClickTab,
            onClose: onCloseClick,
            onSelect: onSelect,
            groupIdentifier: groupIdentifier,
            closeTabText: closeTabText ?? t('close tab'),
            getIndexByKey: getIndexByKey,
            onItemMove: handleItemMove,
            canBeDragged: canReorderByDragging,
            isAnyItemDragging: isAnyItemDragging,
            setIsAnyItemDragging: setIsAnyItemDragging
          }, tab.key))
        }), onCreate != null && /*#__PURE__*/_jsx(Button, {
          className: "closable-tabs-create",
          accentType: ACCENT_TYPES.COMMAND,
          size: BUTTON_SIZES.SM,
          onClick: onCreate,
          testId: testId ? `${testId}-create` : undefined,
          isDisabled: onCreateIsDisabled,
          tooltipText: onCreateTooltipText,
          tooltipPlacement: onCreateTooltipPlacement,
          "aria-label": createTabText ?? t('create tab'),
          children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
            icon: faPlus
          })
        }), rightSideActions != null && /*#__PURE__*/_jsx("div", {
          className: "closable-tabs-right-side-actions",
          children: rightSideActions
        })]
      }), children ? /*#__PURE__*/_jsx("article", {
        className: "closable-tabs-content",
        children: children
      }) : null]
    })
  });
};