"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_desktop_exports = {};
__export(section_desktop_exports, {
  SectionDesktop: () => SectionDesktop
});
module.exports = __toCommonJS(section_desktop_exports);
var import_design_system = require("@wix/design-system");
var import_react = __toESM(require("react"));
var import_ricos_context = require("./../../../../ricos-context/index.js");
var import_v1 = require("./../../../../ricos-schema/legacy/wix/rich_content/v1/index.js");
var import_bi_context_provider = require("./../../../bi-context-provider/bi-context-provider.js");
var import_constants = require("./../../../link-modal/constants.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 SectionDesktop = ({
  autoCompletePopoverProps,
  autoFocus,
  dropDownPopoverProps,
  link,
  tooltipProps,
  multipleSections,
  onSelect,
  onSubmit,
  t,
  setMultipleSections
}) => {
  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 { adapter } = (0, import_react.useContext)(import_ricos_context.EditorContext);
  const enableMultipleSelection = adapter.tiptapEditor?.state?.selection?.empty && !adapter.getEditorCommands().hasLinkInSelection();
  const sectionOptions = (0, import_react.useMemo)(
    () => sections.map(
      (section) => Object.assign(
        (0, import_design_system.listItemSelectBuilder)({
          ellipsis: true,
          titleMaxLines: 2,
          id: section.id,
          label: section.title,
          prefix: section.prefixAvatar,
          size: "small",
          subtitle: section.subtitle,
          title: section.title,
          tooltipProps: {
            ...tooltipProps,
            children: section.title,
            enterDelay: 1e3,
            placement: "top"
          }
        }),
        {
          node: section.node,
          prefix: section.prefix
        }
      )
    ),
    [sections, tooltipProps]
  );
  const [selectedTypeOption, setSelectedTypeOption] = (0, import_react.useState)(
    sectionTypeOptions[0]
  );
  const [selectedOption, setSelectedOption] = (0, import_react.useState)(
    // Initially "all" option types are selected so any found option should be present in `filteredOptions` below:
    () => link.anchor && sectionOptions.find((option) => option.node.id === link.anchor) || null
  );
  const [searchPrefix, setSearchPrefix] = (0, import_react.useState)(selectedOption?.prefix || null);
  const [searchText, setSearchText] = (0, import_react.useState)(selectedOption?.label || "");
  const filteredOptions = (0, import_react.useMemo)(() => {
    const lowerSearchText = searchText.trim().toLowerCase();
    return sectionOptions.filter(
      (option) => (selectedTypeOption.id === "all" || option.node.type === selectedTypeOption.id) && (selectedOption || !lowerSearchText || typeof option.label === "string" && option.label?.toLowerCase().includes(lowerSearchText))
    );
  }, [sectionOptions, searchText, selectedTypeOption]);
  const onChangeInput = (value) => {
    setSearchPrefix(null);
    setSearchText(value);
    setSelectedOption(null);
  };
  const onSelectTypeOption = (option) => {
    setSelectedTypeOption(option);
    logBi({
      dataHook: import_data_hooks.SECTION_TYPE_SELECT,
      value: `${option.id}`
    });
  };
  const onSelectValueOption = (option) => {
    setSearchPrefix(option.prefix);
    setSearchText(option.label || searchText);
    setSelectedOption(option);
    onSelect(option.node.id, option.label);
    logBi({ dataHook: import_data_hooks.SECTION_SELECT, value: option.label });
  };
  const onEnterPressed = (evt) => {
    if (selectedOption) {
      onSelect(selectedOption.node.id, selectedOption.label);
      onSubmit(evt);
    }
    if (multipleSections.length > 0 && !isOptionMarked) {
      onSubmit(evt);
      setIsOptionMarked(false);
    }
  };
  if (sectionOptions.length === 0) {
    return /* @__PURE__ */ import_react.default.createElement(import_empty_state.SectionEmptyState, { t });
  }
  const [isOptionMarked, setIsOptionMarked] = (0, import_react.useState)(false);
  const onMultiSelectOption = (option) => {
    setIsOptionMarked(false);
    setMultipleSections((prev) => [
      ...prev,
      {
        anchor: option.node.id,
        defaultName: option.label,
        target: import_v1.Link_Target.BLANK,
        url: void 0
      }
    ]);
    logBi({ dataHook: import_data_hooks.SECTION_MULTISELECT, value: option.label });
  };
  const onRemoveTag = (tagId) => setMultipleSections((prevTags) => prevTags.filter((currTag) => currTag.anchor !== tagId));
  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__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: onSelectTypeOption,
      options: sectionTypeOptions,
      popoverProps: dropDownPopoverProps,
      selectedId: selectedTypeOption.id,
      size: "small",
      valueParser: (option) => option.label
    }
  )), /* @__PURE__ */ import_react.default.createElement(
    import_design_system.FormField,
    {
      label: t(
        enableMultipleSelection ? "LinkSettings_Sections_MultiSelect_Label" : "LinkSettings_Sections_AutoComplete_Label"
      ),
      labelPlacement: "top"
    },
    enableMultipleSelection ? /* @__PURE__ */ import_react.default.createElement(
      import_design_system.MultiSelect,
      {
        autoFocus,
        dataHook: import_data_hooks.SECTION_MULTISELECT,
        dropdownWidth: "auto",
        emptyStateMessage: /* @__PURE__ */ import_react.default.createElement(import_design_system.Text, { skin: "disabled", size: "small" }, searchText ? t("LinkSettings_Sections_AutoComplete_NoResults_Search", { searchText }) : t("LinkSettings_Sections_AutoComplete_NoResults_All")),
        minWidthPixels: "252px",
        onChange: (evt) => onChangeInput(evt.target.value),
        onEnterPressed,
        options: filteredOptions,
        placeholder: t("LinkSettings_Sections_MultiSelect_Placeholder"),
        popoverProps: autoCompletePopoverProps,
        prefix: searchPrefix && /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.IconAffix, null, searchPrefix),
        size: "small",
        textOverflow: "ellipsis",
        value: searchText,
        onSelect: onMultiSelectOption,
        onRemoveTag,
        tags: multipleSections.map((section) => ({
          id: section.anchor || "",
          label: section?.defaultName || ""
        })),
        onOptionMarked: (option) => {
          if (option) {
            setIsOptionMarked(true);
          }
        }
      }
    ) : /* @__PURE__ */ import_react.default.createElement(
      import_design_system.AutoComplete,
      {
        autoFocus,
        dataHook: import_data_hooks.SECTION_SELECT,
        dropdownWidth: "auto",
        emptyStateMessage: /* @__PURE__ */ import_react.default.createElement(import_design_system.Text, { skin: "disabled", size: "small" }, searchText ? t("LinkSettings_Sections_AutoComplete_NoResults_Search", { searchText }) : t("LinkSettings_Sections_AutoComplete_NoResults_All")),
        focusOnSelectedOption: true,
        markedOption: filteredOptions.some((opt) => opt.id === selectedOption?.id) ? selectedOption?.id : void 0,
        minWidthPixels: "252px",
        onChange: (evt) => onChangeInput(evt.target.value),
        onEnterPressed,
        onSelect: onSelectValueOption,
        options: filteredOptions,
        placeholder: t("LinkSettings_Sections_AutoComplete_Placeholder"),
        popoverProps: autoCompletePopoverProps,
        prefix: searchPrefix && /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.IconAffix, null, searchPrefix),
        selectedId: selectedOption?.id,
        size: "small",
        textOverflow: "ellipsis",
        value: searchText
      }
    )
  ));
};
//# sourceMappingURL=section-desktop.js.map
