"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var section_mobile_exports = {};
__export(section_mobile_exports, {
  SectionMobile: () => SectionMobile
});
module.exports = __toCommonJS(section_mobile_exports);
var import_design_system = require("@wix/design-system");
var import_react = __toESM(require("react"));
var import_bi_context_provider = require("./../../../bi-context-provider/bi-context-provider.js");
var import_constants = require("./../../../link-modal/constants.js");
var import_wix_rich_content_common = require("./../../../../wix-rich-content-common/index.js");
var import_data_hooks = require("../../data-hooks/data-hooks.js");
var import_empty_state = require("./empty-state.js");
var import_use_options = require("./use-options.js");
const selectedListItem = "selected-list-item";
const SectionMobile = ({ link, onSelect, t }) => {
  const logBi = (0, import_bi_context_provider.useBiNext)({ pluginId: "link", modalId: import_constants.LINK_MODAL_ID });
  const { sections, sectionTypeOptions } = (0, import_use_options.useSectionOptions)();
  const itemContainerRef = (0, import_react.useRef)();
  const [selectedTypeOption, setSelectedTypeOption] = (0, import_react.useState)(
    sectionTypeOptions[0]
  );
  const filteredSections = (0, import_react.useMemo)(
    () => sections.filter(
      (section) => selectedTypeOption.id === "all" || section.node.type === selectedTypeOption.id
    ),
    [sections, selectedTypeOption]
  );
  (0, import_react.useEffect)(() => {
    setTimeout(() => {
      itemContainerRef.current?.querySelector((0, import_wix_rich_content_common.dataHook)(selectedListItem))?.scrollIntoView({ behavior: "smooth", block: "center" });
    });
  }, []);
  if (sections.length === 0) {
    return /* @__PURE__ */ import_react.default.createElement(import_empty_state.SectionEmptyState, { t });
  }
  const onSelectType = (option) => {
    setSelectedTypeOption(option);
    logBi({ dataHook: import_data_hooks.SECTION_TYPE_SELECT, value: `${option.id}` });
  };
  const onSelectSection = (section) => {
    onSelect(section.id, section.title);
    logBi({ dataHook: import_data_hooks.SECTION_SELECT });
  };
  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "vertical", paddingLeft: "SP3", paddingRight: "SP3" }, /* @__PURE__ */ import_react.default.createElement(import_design_system.FormField, { label: t("LinkSettings_Sections_TypeDropdown_Label"), labelPlacement: "top" }, /* @__PURE__ */ import_react.default.createElement(
    import_design_system.Dropdown,
    {
      dataHook: import_data_hooks.SECTION_TYPE_SELECT,
      onSelect: onSelectType,
      options: sectionTypeOptions,
      selectedId: selectedTypeOption.id,
      size: "small",
      valueParser: (option) => option.label
    }
  ))), /* @__PURE__ */ import_react.default.createElement(import_design_system.Divider, null), /* @__PURE__ */ import_react.default.createElement(
    import_design_system.Box,
    {
      direction: "vertical",
      flexGrow: 1,
      overflowY: "auto",
      padding: 0,
      paddingBottom: "SP3",
      ref: itemContainerRef
    },
    filteredSections.map((section) => {
      const selected = section.id === link.anchor;
      return /* @__PURE__ */ import_react.default.createElement(
        import_design_system.ListItemSelect,
        {
          dataHook: selected ? selectedListItem : void 0,
          ellipsis: true,
          titleMaxLines: 2,
          highlighted: selected,
          key: section.id,
          onClick: () => onSelectSection(section),
          prefix: section.prefixAvatar,
          selected,
          size: "medium",
          subtitle: section.subtitle,
          title: section.title
        }
      );
    })
  ));
};
//# sourceMappingURL=section-mobile.js.map
