"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// packages/preferences/src/components/preferences-modal-tabs/index.tsx
var preferences_modal_tabs_exports = {};
__export(preferences_modal_tabs_exports, {
  default: () => PreferencesModalTabs
});
module.exports = __toCommonJS(preferences_modal_tabs_exports);
var import_compose = require("@wordpress/compose");
var import_components = require("@wordpress/components");
var import_element = require("@wordpress/element");
var import_icons = require("@wordpress/icons");
var import_i18n = require("@wordpress/i18n");
var import_lock_unlock = require("../../lock-unlock.cjs");
var import_jsx_runtime = require("react/jsx-runtime");
var { Tabs } = (0, import_lock_unlock.unlock)(import_components.privateApis);
var PREFERENCES_MENU = "preferences-menu";
function PreferencesModalTabs({
  sections
}) {
  const isLargeViewport = (0, import_compose.useViewportMatch)("medium");
  const [activeMenu, setActiveMenu] = (0, import_element.useState)(PREFERENCES_MENU);
  const { tabs, sectionsContentMap } = (0, import_element.useMemo)(() => {
    let mappedTabs = {
      tabs: [],
      sectionsContentMap: {}
    };
    if (sections.length) {
      mappedTabs = sections.reduce(
        (accumulator, { name, tabLabel: title, content }) => {
          accumulator.tabs.push({ name, title });
          accumulator.sectionsContentMap[name] = content;
          return accumulator;
        },
        { tabs: [], sectionsContentMap: {} }
      );
    }
    return mappedTabs;
  }, [sections]);
  let modalContent;
  if (isLargeViewport) {
    modalContent = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "preferences__tabs", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
      Tabs,
      {
        defaultTabId: activeMenu !== PREFERENCES_MENU ? activeMenu : void 0,
        onSelect: setActiveMenu,
        orientation: "vertical",
        children: [
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs.TabList, { className: "preferences__tabs-tablist", children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
            Tabs.Tab,
            {
              tabId: tab.name,
              className: "preferences__tabs-tab",
              children: tab.title
            },
            tab.name
          )) }),
          tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
            Tabs.TabPanel,
            {
              tabId: tab.name,
              className: "preferences__tabs-tabpanel",
              focusable: false,
              children: sectionsContentMap[tab.name] || null
            },
            tab.name
          ))
        ]
      }
    ) });
  } else {
    modalContent = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.Navigator, { initialPath: "/", className: "preferences__provider", children: [
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Navigator.Screen, { path: "/", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Card, { isBorderless: true, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.CardBody, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalItemGroup, { children: tabs.map((tab) => {
        return (
          // @ts-expect-error: Navigator.Button is currently typed in a way that prevents Item from being passed in
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
            import_components.Navigator.Button,
            {
              path: `/${tab.name}`,
              as: import_components.__experimentalItem,
              isAction: true,
              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { justify: "space-between", children: [
                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalTruncate, { children: tab.title }) }),
                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                  import_icons.Icon,
                  {
                    icon: (0, import_i18n.isRTL)() ? import_icons.chevronLeft : import_icons.chevronRight
                  }
                ) })
              ] })
            },
            tab.name
          )
        );
      }) }) }) }) }),
      sections.length && sections.map((section) => {
        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_components.Navigator.Screen,
          {
            path: `/${section.name}`,
            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.Card, { isBorderless: true, size: "large", children: [
              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                import_components.CardHeader,
                {
                  isBorderless: false,
                  justify: "left",
                  size: "small",
                  gap: "6",
                  as: "div",
                  children: [
                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                      import_components.Navigator.BackButton,
                      {
                        icon: (0, import_i18n.isRTL)() ? import_icons.chevronRight : import_icons.chevronLeft,
                        label: (0, import_i18n.__)("Back")
                      }
                    ),
                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalText, { size: "16", children: section.tabLabel })
                  ]
                }
              ),
              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.CardBody, { children: section.content })
            ] })
          },
          `${section.name}-menu`
        );
      })
    ] });
  }
  return modalContent;
}
//# sourceMappingURL=index.cjs.map
