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