"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _compose = require("@wordpress/compose");
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _lockUnlock = require("../../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const {
  Tabs
} = (0, _lockUnlock.unlock)(_components.privateApis);
function CategoryTabs({
  categories,
  selectedCategory,
  onSelectCategory,
  children
}) {
  // Copied from InterfaceSkeleton.
  const ANIMATION_DURATION = 0.25;
  const disableMotion = (0, _compose.useReducedMotion)();
  const defaultTransition = {
    type: 'tween',
    duration: disableMotion ? 0 : ANIMATION_DURATION,
    ease: [0.6, 0, 0.4, 1]
  };
  const previousSelectedCategory = (0, _compose.usePrevious)(selectedCategory);
  const selectedTabId = selectedCategory ? selectedCategory.name : null;
  const [activeTabId, setActiveId] = (0, _element.useState)();
  const firstTabId = categories?.[0]?.name;

  // If there is no active tab, make the first tab the active tab, so that
  // when focus is moved to the tablist, the first tab will be focused
  // despite not being selected
  if (selectedTabId === null && !activeTabId && firstTabId) {
    setActiveId(firstTabId);
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Tabs, {
    selectOnMove: false,
    selectedTabId: selectedTabId,
    orientation: "vertical",
    onSelect: categoryId => {
      // Pass the full category object
      onSelectCategory(categories.find(category => category.name === categoryId));
    },
    activeTabId: activeTabId,
    onActiveTabIdChange: setActiveId,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs.TabList, {
      className: "block-editor-inserter__category-tablist",
      children: categories.map(category => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs.Tab, {
        tabId: category.name,
        "aria-label": category.label,
        "aria-current": category === selectedCategory ? 'true' : undefined,
        children: category.label
      }, category.name))
    }), categories.map(category => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs.TabPanel, {
      tabId: category.name,
      focusable: false,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__unstableMotion.div, {
        className: "block-editor-inserter__category-panel",
        initial: !previousSelectedCategory ? 'closed' : 'open',
        animate: "open",
        variants: {
          open: {
            transform: 'translateX( 0 )',
            transitionEnd: {
              zIndex: '1'
            }
          },
          closed: {
            transform: 'translateX( -100% )',
            zIndex: '-1'
          }
        },
        transition: defaultTransition,
        children: children
      })
    }, category.name))]
  });
}
var _default = exports.default = CategoryTabs;
//# sourceMappingURL=index.js.map