"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = MobileTabNavigation;
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _icons = require("@wordpress/icons");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

function ScreenHeader({
  title
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
    spacing: 0,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalView, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {
        marginBottom: 0,
        paddingX: 4,
        paddingY: 3,
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
          spacing: 2,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalNavigatorBackButton, {
            style:
            // TODO: This style override is also used in ToolsPanelHeader.
            // It should be supported out-of-the-box by Button.
            {
              minWidth: 24,
              padding: 0
            },
            icon: (0, _i18n.isRTL)() ? _icons.chevronRight : _icons.chevronLeft,
            size: "small",
            label: (0, _i18n.__)('Back')
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHeading, {
              level: 5,
              children: title
            })
          })]
        })
      })
    })
  });
}
function MobileTabNavigation({
  categories,
  children
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalNavigatorProvider, {
    initialPath: "/",
    className: "block-editor-inserter__mobile-tab-navigation",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalNavigatorScreen, {
      path: "/",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalItemGroup, {
        children: categories.map(category => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalNavigatorButton, {
          path: `/category/${category.name}`,
          as: _components.__experimentalItem,
          isAction: true,
          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexBlock, {
              children: category.label
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
              icon: (0, _i18n.isRTL)() ? _icons.chevronLeft : _icons.chevronRight
            })]
          })
        }, category.name))
      })
    }), categories.map(category => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalNavigatorScreen, {
      path: `/category/${category.name}`,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ScreenHeader, {
        title: (0, _i18n.__)('Back')
      }), children(category)]
    }, category.name))]
  });
}
//# sourceMappingURL=mobile-tab-navigation.js.map