"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 media_settings_form_exports = {};
__export(media_settings_form_exports, {
  MediaSettingsForm: () => MediaSettingsForm
});
module.exports = __toCommonJS(media_settings_form_exports);
var import_design_system = require("@wix/design-system");
var import_wix_ui_icons_common = require("@wix/wix-ui-icons-common");
var import_react = __toESM(require("react"));
var import_ricos_context = require("./../../../../ricos-context/index.js");
var import_editor_base_url_context = require("./../../../../_shared/editor-base-url/editor-base-url-context.js");
var import_constants = require("./../../../../_shared/link-modal/constants.js");
var import_section_type_keys = require("./../../../../_shared/link-modal/section-type-keys.js");
var import_toggle_link_modal = require("./../../../../_shared/link-modal/toggle-link-modal.js");
var import_get_editable_url = require("./../../../../_shared/url/get-editable-url.js");
var import_ui_components = require("./../../../../ui-components/index.js");
var import_helpers = require("./../../../../tiptap-editor/helpers/index.js");
var import_data_hooks = require("../../../data-hooks.js");
var import_carousel_item = require("./carousel-item.js");
const MediaSettingsForm = ({
  galleryItems,
  activeImageIndex,
  accept,
  itemKey,
  onImageIndexChange,
  onDeleteClick,
  onTitleChange,
  onAltTextChange,
  onLinkSave,
  onUnlink,
  onFileSelect,
  closeModal,
  logBi
}) => {
  const galleryItem = galleryItems[activeImageIndex];
  const modalService = (0, import_react.useContext)(import_ricos_context.ModalServiceContext);
  const { baseUrl } = (0, import_react.useContext)(import_editor_base_url_context.EditorBaseUrlContext);
  const { t } = (0, import_react.useContext)(import_ricos_context.RicosContext);
  const { adapter } = (0, import_react.useContext)(import_ricos_context.EditorContext);
  const containerEl = (0, import_ui_components.usePanelContainerElement)();
  const shouldSyncAltText = (0, import_react.useMemo)(
    () => galleryItem.title === galleryItem.altText || !galleryItem.altText,
    [galleryItem.title, galleryItem.altText]
  );
  const openLinkModal = (0, import_react.useCallback)(
    () => (0, import_toggle_link_modal.toggleLinkModal)({
      initialValue: galleryItem.image?.link,
      modalService,
      onSave: (linkData) => {
        onLinkSave(linkData);
      },
      onUnlink,
      referenceElement: containerEl,
      placement: "left-end",
      onClickOutside: (e) => {
        modalService.closeModal(import_constants.LINK_MODAL_ID);
        if (!containerEl.contains(e.target)) {
          closeModal();
        }
      }
    }),
    [galleryItem.image?.link, modalService, onLinkSave, onUnlink, containerEl]
  );
  return /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "vertical", gap: "SP2" }, /* @__PURE__ */ import_react.default.createElement(
    import_design_system.Carousel,
    {
      initialSlideIndex: activeImageIndex,
      beforeChange: (_, next) => {
        onImageIndexChange(next);
      },
      controlsStartEnd: "hidden",
      controlsPosition: "overlay",
      dataHook: import_data_hooks.MEDIA_ITEM_SETTINGS_CAROUSEL,
      imagesFit: "contain",
      infinite: false
    },
    galleryItems.map((item, index) => /* @__PURE__ */ import_react.default.createElement(
      import_carousel_item.CarouselItem,
      {
        key: `${item.image?.media.src.id ?? item.image?.media.src.url}-${index}`,
        galleryItem: item
      }
    ))
  ), /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { align: "space-between" }, /* @__PURE__ */ import_react.default.createElement(
    import_design_system.FileUpload,
    {
      dataHook: import_data_hooks.MEDIA_ITEM_SETTINGS_REPLACE_BUTTON,
      onChange: () => {
      },
      accept,
      multiple: false
    },
    () => /* @__PURE__ */ import_react.default.createElement(
      import_design_system.Button,
      {
        "aria-label": "replace image",
        onClick: () => {
          logBi({ dataHook: import_data_hooks.MEDIA_ITEM_SETTINGS_REPLACE_BUTTON });
          onFileSelect?.(activeImageIndex);
        },
        priority: "secondary",
        prefixIcon: /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.Replace, null),
        size: "small"
      },
      t("GalleryImageSettings_Replace_Label")
    )
  ), /* @__PURE__ */ import_react.default.createElement(
    import_design_system.Button,
    {
      "aria-label": "delete image",
      dataHook: import_data_hooks.MEDIA_ITEM_SETTINGS_DELETE_BUTTON,
      onClick: () => {
        logBi({ dataHook: import_data_hooks.MEDIA_ITEM_SETTINGS_DELETE_BUTTON });
        onDeleteClick();
      },
      priority: "secondary",
      prefixIcon: /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.Delete, null),
      size: "small"
    },
    t("GalleryImageSettings_Delete_Label")
  )), /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { marginInline: "-18px" }, /* @__PURE__ */ import_react.default.createElement(import_design_system.Divider, null)), /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "vertical", key: itemKey, gap: "SP2" }, /* @__PURE__ */ import_react.default.createElement(import_design_system.FormField, { label: t("ImageSettings_Caption_Label") }, /* @__PURE__ */ import_react.default.createElement(
    import_design_system.Input,
    {
      placeholder: t("ImageSettings_Caption_Input_Placeholder"),
      value: galleryItem.title ?? "",
      maxLength: 100,
      dataHook: import_data_hooks.MEDIA_ITEM_SETTINGS_CAPTION_INPUT,
      onChange: (e) => {
        logBi({ dataHook: import_data_hooks.MEDIA_ITEM_SETTINGS_CAPTION_INPUT, value: e.target.value });
        onTitleChange(e.target.value, shouldSyncAltText);
      },
      size: "small",
      textOverflow: "ellipsis"
    }
  )), /* @__PURE__ */ import_react.default.createElement(import_design_system.FormField, { label: t("ImageSettings_Alt_Label") }, /* @__PURE__ */ import_react.default.createElement(
    import_design_system.Input,
    {
      placeholder: t("ImageSettings_Alt_Input_Placeholder"),
      value: typeof galleryItem.altText === "string" ? galleryItem.altText ?? "" : galleryItem.title ?? "",
      dataHook: import_data_hooks.MEDIA_ITEM_SETTINGS_ALT_INPUT,
      onChange: (e) => {
        logBi({ dataHook: import_data_hooks.MEDIA_ITEM_SETTINGS_ALT_INPUT, value: e.target.value });
        onAltTextChange(e.target.value);
      },
      size: "small",
      textOverflow: "ellipsis"
    }
  )), galleryItem?.image && /* @__PURE__ */ import_react.default.createElement(import_design_system.FieldSet, { legend: "Link", columns: galleryItem.image?.link ? "1fr min-content" : void 0 }, galleryItem.image?.link ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_design_system.FormField, null, /* @__PURE__ */ import_react.default.createElement(
    import_design_system.Input,
    {
      size: "small",
      readOnly: true,
      textOverflow: "ellipsis",
      value: galleryItem.image?.link.url ? (0, import_get_editable_url.getEditableUrl)(galleryItem.image.link.url, baseUrl) : galleryItem.image.link.anchor ? t(
        getAnchorableNodeTextKey(
          adapter.tiptapEditor.view.state.tr,
          galleryItem.image.link.anchor
        )
      ) : ""
    }
  )), /* @__PURE__ */ import_react.default.createElement(
    import_design_system.IconButton,
    {
      onClick: () => {
        logBi({ dataHook: import_data_hooks.MEDIA_ITEM_SETTINGS_ADD_EDIT_LINK_BUTTON });
        openLinkModal();
      },
      size: "small",
      priority: "secondary",
      dataHook: import_data_hooks.MEDIA_ITEM_SETTINGS_ADD_EDIT_LINK_BUTTON
    },
    /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.LinkSmall, null)
  )) : /* @__PURE__ */ import_react.default.createElement(
    import_design_system.Button,
    {
      priority: "secondary",
      size: "small",
      onClick: () => {
        logBi({ dataHook: import_data_hooks.MEDIA_ITEM_SETTINGS_ADD_LINK_BUTTON });
        openLinkModal();
      },
      suffixIcon: /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.LinkSmall, { size: 30 }),
      dataHook: import_data_hooks.MEDIA_ITEM_SETTINGS_ADD_LINK_BUTTON
    },
    t("GalleryImageSettings_Add_Link_Button")
  ))));
};
const getAnchorableNodeTextKey = (tr, nodeId) => {
  const nodeWithPos = (0, import_helpers.findNodeById)(tr, nodeId)[0];
  const nodeType = nodeWithPos?.node.type.name;
  if (isAnchorableNode(nodeType)) {
    return import_section_type_keys.sectionTypeKeys[nodeType];
  }
  return "";
};
const isAnchorableNode = (type) => type in import_section_type_keys.sectionTypeKeys;
//# sourceMappingURL=media-settings-form.js.map
