"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 layout_tab_exports = {};
__export(layout_tab_exports, {
  LayoutTab: () => LayoutTab
});
module.exports = __toCommonJS(layout_tab_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/ricos-context.js");
var import_ricos_document = require("./../../ricos-schema/next-schema/generated/ricos_document.js");
var import_bi_context_provider = require("./../../_shared/bi-context-provider/bi-context-provider.js");
var import_uncreachable = require("./../../_shared/uncreachable.js");
var import_ui_components = require("./../../ui-components/index.js");
var import_vertical_embed_styles = require("../viewer/vertical-embed-styles.js");
const LayoutTab = ({ nodeId, modalId, pmNodeAttrs, patchPmNodeAttrs }) => {
  const { t, languageDir } = (0, import_react.useContext)(import_ricos_context.RicosContext);
  const isRTL = languageDir === "rtl";
  const containerEl = (0, import_ui_components.usePanelContainerElement)();
  const logBi = (0, import_bi_context_provider.useBiNext)({ modalId, pluginId: "verticalEmbed", nodeId });
  const position = pmNodeAttrs?.imageStyles?.imagePosition || import_ricos_document.AppEmbedData_ImageStyles_Position.START;
  const ratio = pmNodeAttrs?.imageStyles?.aspectRatio || import_ricos_document.AppEmbedData_ImageStyles_AspectRatio.SQUARE;
  const resizing = pmNodeAttrs?.imageStyles?.resizing || import_ricos_document.AppEmbedData_ImageStyles_Resizing.FILL;
  const alignment = pmNodeAttrs?.cardStyles?.alignment || import_ricos_document.AppEmbedData_CardStyles_Alignment.START;
  const titlePriceLayout = pmNodeAttrs?.cardStyles?.titlePriceLayout || import_vertical_embed_styles.TITLE_PRICE_LAYOUT.STACKED;
  const ribbonPlacement = pmNodeAttrs?.ribbonStyles?.ribbonPlacement || import_ricos_document.AppEmbedData_RibbonStyles_Placement.PRODUCT_INFO;
  const updateStyles = (updates) => {
    const imageUpdates = {};
    const cardUpdates = {};
    const ribbonUpdates = {};
    Object.entries(updates).forEach(([key, value]) => {
      const styleKey = key;
      switch (styleKey) {
        case "position":
          imageUpdates.imagePosition = value.toUpperCase();
          break;
        case "ratio":
          imageUpdates.aspectRatio = value.toUpperCase();
          break;
        case "resizing":
          imageUpdates.resizing = value.toUpperCase();
          break;
        case "alignment":
          cardUpdates.alignment = value.toUpperCase();
          break;
        case "titlePriceLayout":
          cardUpdates.titlePriceLayout = value.toUpperCase();
          break;
        case "ribbonPlacement":
          ribbonUpdates.ribbonPlacement = value.toUpperCase();
          break;
        default:
          (0, import_uncreachable.unreachable)(styleKey);
          return null;
      }
    });
    patchPmNodeAttrs({
      imageStyles: {
        ...pmNodeAttrs?.imageStyles,
        ...imageUpdates
      },
      cardStyles: {
        ...pmNodeAttrs?.cardStyles,
        ...cardUpdates
      },
      ribbonStyles: {
        ...pmNodeAttrs?.ribbonStyles,
        ...ribbonUpdates
      }
    });
  };
  return /* @__PURE__ */ import_react.default.createElement(
    import_design_system.Accordion,
    {
      hideShadow: true,
      skin: "light",
      size: "medium",
      multiple: true,
      items: [
        (0, import_design_system.accordionItemBuilder)({
          initiallyOpen: true,
          title: /* @__PURE__ */ import_react.default.createElement(import_design_system.Text, { size: "small", weight: "bold" }, t("Embed_Vertical_Layout_Panel_Image_Section")),
          children: /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "vertical", gap: "SP2" }, /* @__PURE__ */ import_react.default.createElement(
            import_design_system.FormField,
            {
              label: t("Embed_Vertical_Layout_Panel_Position_Label"),
              labelPlacement: "left",
              labelWidth: "1fr"
            },
            /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "horizontal", gap: "SP1", align: "left" }, /* @__PURE__ */ import_react.default.createElement(
              import_design_system.Tooltip,
              {
                size: "small",
                inline: true,
                content: isRTL ? t("Embed_Vertical_Layout_Panel_Position_Right") : t("Embed_Vertical_Layout_Panel_Position_Left"),
                appendTo: containerEl
              },
              /* @__PURE__ */ import_react.default.createElement(
                import_design_system.Thumbnail,
                {
                  size: "tiny",
                  selected: position === import_ricos_document.AppEmbedData_ImageStyles_Position.START,
                  onClick: () => {
                    logBi({ dataHook: "VERTICAL_EMBED_POSITION_START" });
                    updateStyles({ position: import_ricos_document.AppEmbedData_ImageStyles_Position.START });
                  },
                  noPadding: true,
                  width: 30,
                  height: 30,
                  contentAlignment: "center",
                  textPosition: "outside",
                  image: isRTL ? /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { height: "100%", width: "100%", align: "center", verticalAlign: "middle" }, /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.ObjectPositionRightSmall, null)) : /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { height: "100%", width: "100%", align: "center", verticalAlign: "middle" }, /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.ObjectPositionLeftSmall, null)),
                  dataHook: "VERTICAL_EMBED_POSITION_START"
                }
              )
            ), /* @__PURE__ */ import_react.default.createElement(
              import_design_system.Tooltip,
              {
                size: "small",
                inline: true,
                content: t("Embed_Vertical_Layout_Panel_Position_Top"),
                appendTo: containerEl
              },
              /* @__PURE__ */ import_react.default.createElement(
                import_design_system.Thumbnail,
                {
                  size: "tiny",
                  selected: position === import_ricos_document.AppEmbedData_ImageStyles_Position.TOP,
                  onClick: () => {
                    logBi({ dataHook: "VERTICAL_EMBED_POSITION_TOP" });
                    updateStyles({ position: import_ricos_document.AppEmbedData_ImageStyles_Position.TOP });
                  },
                  noPadding: true,
                  width: 30,
                  height: 30,
                  contentAlignment: "center",
                  textPosition: "outside",
                  image: /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { height: "100%", width: "100%", align: "center", verticalAlign: "middle" }, /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.ObjectPositionTopSmall, null)),
                  dataHook: "VERTICAL_EMBED_POSITION_TOP"
                }
              )
            ), /* @__PURE__ */ import_react.default.createElement(
              import_design_system.Tooltip,
              {
                size: "small",
                inline: true,
                content: isRTL ? t("Embed_Vertical_Layout_Panel_Position_Left") : t("Embed_Vertical_Layout_Panel_Position_Right"),
                appendTo: containerEl
              },
              /* @__PURE__ */ import_react.default.createElement(
                import_design_system.Thumbnail,
                {
                  size: "tiny",
                  selected: position === import_ricos_document.AppEmbedData_ImageStyles_Position.END,
                  onClick: () => {
                    logBi({ dataHook: "VERTICAL_EMBED_POSITION_END" });
                    updateStyles({ position: import_ricos_document.AppEmbedData_ImageStyles_Position.END });
                  },
                  noPadding: true,
                  width: 30,
                  height: 30,
                  contentAlignment: "center",
                  textPosition: "outside",
                  image: isRTL ? /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { height: "100%", width: "100%", align: "center", verticalAlign: "middle" }, /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.ObjectPositionLeftSmall, null)) : /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { height: "100%", width: "100%", align: "center", verticalAlign: "middle" }, /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.ObjectPositionRightSmall, null)),
                  dataHook: "VERTICAL_EMBED_POSITION_END"
                }
              )
            ))
          ), /* @__PURE__ */ import_react.default.createElement(
            import_design_system.FormField,
            {
              label: t("Embed_Vertical_Layout_Panel_Ratio_Label"),
              labelPlacement: "left",
              labelWidth: "1fr"
            },
            /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "horizontal", gap: "SP1", align: "left" }, /* @__PURE__ */ import_react.default.createElement(
              import_design_system.Tooltip,
              {
                size: "small",
                inline: true,
                content: t("Embed_Vertical_Layout_Panel_Ratio_Square"),
                appendTo: containerEl
              },
              /* @__PURE__ */ import_react.default.createElement(
                import_design_system.Thumbnail,
                {
                  size: "tiny",
                  selected: ratio === import_ricos_document.AppEmbedData_ImageStyles_AspectRatio.SQUARE,
                  onClick: () => {
                    logBi({ dataHook: "VERTICAL_EMBED_RATIO_SQUARE" });
                    updateStyles({ ratio: import_ricos_document.AppEmbedData_ImageStyles_AspectRatio.SQUARE });
                  },
                  noPadding: true,
                  width: 30,
                  height: 30,
                  contentAlignment: "center",
                  textPosition: "outside",
                  image: /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { height: "100%", width: "100%", align: "center", verticalAlign: "middle" }, /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.SquareRatioSmall, null)),
                  dataHook: "VERTICAL_EMBED_RATIO_SQUARE"
                }
              )
            ), /* @__PURE__ */ import_react.default.createElement(
              import_design_system.Tooltip,
              {
                size: "small",
                inline: true,
                content: t("Embed_Vertical_Layout_Panel_Ratio_Rectangle"),
                appendTo: containerEl
              },
              /* @__PURE__ */ import_react.default.createElement(
                import_design_system.Thumbnail,
                {
                  size: "tiny",
                  selected: ratio === import_ricos_document.AppEmbedData_ImageStyles_AspectRatio.RECTANGLE,
                  onClick: () => {
                    logBi({ dataHook: "VERTICAL_EMBED_RATIO_RECTANGLE" });
                    updateStyles({ ratio: import_ricos_document.AppEmbedData_ImageStyles_AspectRatio.RECTANGLE });
                  },
                  noPadding: true,
                  width: 30,
                  height: 30,
                  contentAlignment: "center",
                  textPosition: "outside",
                  image: /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { height: "100%", width: "100%", align: "center", verticalAlign: "middle" }, /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.HorizontalRatioSmall, null)),
                  dataHook: "VERTICAL_EMBED_RATIO_RECTANGLE"
                }
              )
            ))
          ), /* @__PURE__ */ import_react.default.createElement(
            import_design_system.FormField,
            {
              label: t("Embed_Vertical_Layout_Panel_Resizing_Label"),
              labelPlacement: "left",
              labelWidth: "1fr",
              inputWidth: "116px"
            },
            /* @__PURE__ */ import_react.default.createElement(
              import_design_system.Dropdown,
              {
                size: "small",
                placeholder: t("Embed_Vertical_Layout_Panel_Resizing_Placeholder"),
                selectedId: resizing,
                onSelect: ({ id }) => {
                  logBi({ dataHook: "VERTICAL_EMBED_RESIZING_CHANGE", value: id });
                  updateStyles({ resizing: id });
                },
                options: [
                  {
                    id: "FILL",
                    value: t("Embed_Vertical_Layout_Panel_Resizing_Fill")
                  },
                  {
                    id: "FIT",
                    value: t("Embed_Vertical_Layout_Panel_Resizing_Fit")
                  }
                ],
                dataHook: "VERTICAL_EMBED_RESIZING_DROPDOWN"
              }
            )
          ))
        }),
        (0, import_design_system.accordionItemBuilder)({
          initiallyOpen: true,
          title: /* @__PURE__ */ import_react.default.createElement(import_design_system.Text, { size: "small", weight: "bold" }, t("Embed_Vertical_Layout_Panel_Information_Section")),
          children: /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "vertical", gap: "SP2" }, /* @__PURE__ */ import_react.default.createElement(
            import_design_system.FormField,
            {
              label: t("Embed_Vertical_Layout_Panel_Alignment_Label"),
              labelPlacement: "left",
              labelWidth: "1fr"
            },
            /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "horizontal", gap: "SP1", align: "left" }, /* @__PURE__ */ import_react.default.createElement(
              import_design_system.Tooltip,
              {
                size: "small",
                inline: true,
                content: t("Embed_Vertical_Layout_Panel_Alignment_Left"),
                appendTo: containerEl
              },
              /* @__PURE__ */ import_react.default.createElement(
                import_design_system.Thumbnail,
                {
                  size: "tiny",
                  selected: alignment === import_ricos_document.AppEmbedData_CardStyles_Alignment.START,
                  onClick: () => {
                    logBi({ dataHook: "VERTICAL_EMBED_ALIGNMENT_LEFT" });
                    updateStyles({ alignment: import_ricos_document.AppEmbedData_CardStyles_Alignment.START });
                  },
                  noPadding: true,
                  width: 30,
                  height: 30,
                  contentAlignment: "center",
                  textPosition: "outside",
                  image: /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { height: "100%", width: "100%", align: "center", verticalAlign: "middle" }, /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.AlignLeftSmall, null)),
                  dataHook: "VERTICAL_EMBED_ALIGNMENT_LEFT"
                }
              )
            ), /* @__PURE__ */ import_react.default.createElement(
              import_design_system.Tooltip,
              {
                size: "small",
                inline: true,
                content: t("Embed_Vertical_Layout_Panel_Alignment_Center"),
                appendTo: containerEl
              },
              /* @__PURE__ */ import_react.default.createElement(
                import_design_system.Thumbnail,
                {
                  size: "tiny",
                  selected: alignment === "CENTER",
                  onClick: () => {
                    logBi({ dataHook: "VERTICAL_EMBED_ALIGNMENT_CENTER" });
                    updateStyles({ alignment: "CENTER" });
                  },
                  noPadding: true,
                  width: 30,
                  height: 30,
                  contentAlignment: "center",
                  textPosition: "outside",
                  image: /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { height: "100%", width: "100%", align: "center", verticalAlign: "middle" }, /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.AlignCenterVerticallySmall, null)),
                  dataHook: "VERTICAL_EMBED_ALIGNMENT_CENTER"
                }
              )
            ), /* @__PURE__ */ import_react.default.createElement(
              import_design_system.Tooltip,
              {
                size: "small",
                inline: true,
                content: t("Embed_Vertical_Layout_Panel_Alignment_Right"),
                appendTo: containerEl
              },
              /* @__PURE__ */ import_react.default.createElement(
                import_design_system.Thumbnail,
                {
                  size: "tiny",
                  selected: alignment === import_ricos_document.AppEmbedData_CardStyles_Alignment.END,
                  onClick: () => {
                    logBi({ dataHook: "VERTICAL_EMBED_ALIGNMENT_RIGHT" });
                    updateStyles({ alignment: import_ricos_document.AppEmbedData_CardStyles_Alignment.END });
                  },
                  noPadding: true,
                  width: 30,
                  height: 30,
                  contentAlignment: "center",
                  textPosition: "outside",
                  image: /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { height: "100%", width: "100%", align: "center", verticalAlign: "middle" }, /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.AlignRightSmall, null)),
                  dataHook: "VERTICAL_EMBED_ALIGNMENT_RIGHT"
                }
              )
            ))
          ), /* @__PURE__ */ import_react.default.createElement(
            import_design_system.FormField,
            {
              label: t("Embed_Vertical_Layout_Panel_Title_Price_Label"),
              labelPlacement: "left",
              labelWidth: "1fr"
            },
            /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "horizontal", gap: "SP1", align: "left" }, /* @__PURE__ */ import_react.default.createElement(
              import_design_system.Tooltip,
              {
                size: "small",
                inline: true,
                content: t("Embed_Vertical_Layout_Panel_Title_Price_Stacked"),
                appendTo: containerEl
              },
              /* @__PURE__ */ import_react.default.createElement(
                import_design_system.Thumbnail,
                {
                  size: "tiny",
                  selected: titlePriceLayout === import_vertical_embed_styles.TITLE_PRICE_LAYOUT.STACKED,
                  onClick: () => {
                    logBi({ dataHook: "VERTICAL_EMBED_TITLE_PRICE_STACKED" });
                    updateStyles({ titlePriceLayout: import_vertical_embed_styles.TITLE_PRICE_LAYOUT.STACKED });
                  },
                  noPadding: true,
                  width: 30,
                  height: 30,
                  contentAlignment: "center",
                  textPosition: "outside",
                  image: /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { height: "100%", width: "100%", align: "center", verticalAlign: "middle" }, /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.StackVerticalSmall, null)),
                  dataHook: "VERTICAL_EMBED_TITLE_PRICE_STACKED"
                }
              )
            ), /* @__PURE__ */ import_react.default.createElement(
              import_design_system.Tooltip,
              {
                size: "small",
                inline: true,
                content: t("Embed_Vertical_Layout_Panel_Title_Price_SideBySide"),
                appendTo: containerEl
              },
              /* @__PURE__ */ import_react.default.createElement(
                import_design_system.Thumbnail,
                {
                  size: "tiny",
                  selected: titlePriceLayout === "SIDE_BY_SIDE",
                  onClick: () => {
                    logBi({ dataHook: "VERTICAL_EMBED_TITLE_PRICE_SIDE_BY_SIDE" });
                    updateStyles({ titlePriceLayout: "SIDE_BY_SIDE" });
                  },
                  noPadding: true,
                  width: 30,
                  height: 30,
                  contentAlignment: "center",
                  textPosition: "outside",
                  image: /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { height: "100%", width: "100%", align: "center", verticalAlign: "middle" }, /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.StackHorizontalSmall, null)),
                  dataHook: "VERTICAL_EMBED_TITLE_PRICE_SIDE_BY_SIDE"
                }
              )
            ))
          ), /* @__PURE__ */ import_react.default.createElement(
            import_design_system.FormField,
            {
              label: t("Embed_Vertical_Layout_Panel_Ribbon_Placement_Label"),
              labelPlacement: "left",
              labelWidth: "1fr"
            },
            /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "horizontal", gap: "SP1", align: "left" }, /* @__PURE__ */ import_react.default.createElement(
              import_design_system.Tooltip,
              {
                size: "small",
                inline: true,
                content: t("Embed_Vertical_Layout_Panel_Ribbon_Placement_OnImage"),
                appendTo: containerEl
              },
              /* @__PURE__ */ import_react.default.createElement(
                import_design_system.Thumbnail,
                {
                  size: "tiny",
                  selected: ribbonPlacement === import_ricos_document.AppEmbedData_RibbonStyles_Placement.IMAGE,
                  onClick: () => {
                    logBi({ dataHook: "VERTICAL_EMBED_RIBBON_PLACEMENT_ON_IMAGE" });
                    updateStyles({
                      ribbonPlacement: import_ricos_document.AppEmbedData_RibbonStyles_Placement.IMAGE
                    });
                  },
                  noPadding: true,
                  width: 30,
                  height: 30,
                  contentAlignment: "center",
                  textPosition: "outside",
                  image: /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { height: "100%", width: "100%", align: "center", verticalAlign: "middle" }, /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.ImageSmall, null)),
                  dataHook: "VERTICAL_EMBED_RIBBON_PLACEMENT_ON_IMAGE"
                }
              )
            ), /* @__PURE__ */ import_react.default.createElement(
              import_design_system.Tooltip,
              {
                size: "small",
                inline: true,
                content: t("Embed_Vertical_Layout_Panel_Ribbon_Placement_AboveInfo"),
                appendTo: containerEl
              },
              /* @__PURE__ */ import_react.default.createElement(
                import_design_system.Thumbnail,
                {
                  size: "tiny",
                  selected: ribbonPlacement === import_ricos_document.AppEmbedData_RibbonStyles_Placement.PRODUCT_INFO,
                  onClick: () => {
                    logBi({ dataHook: "VERTICAL_EMBED_RIBBON_PLACEMENT_ABOVE_INFO" });
                    updateStyles({
                      ribbonPlacement: import_ricos_document.AppEmbedData_RibbonStyles_Placement.PRODUCT_INFO
                    });
                  },
                  noPadding: true,
                  width: 30,
                  height: 30,
                  contentAlignment: "center",
                  textPosition: "outside",
                  image: /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { height: "100%", width: "100%", align: "center", verticalAlign: "middle" }, /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.DropdownListSmall, null)),
                  dataHook: "VERTICAL_EMBED_RIBBON_PLACEMENT_ABOVE_INFO"
                }
              )
            ))
          ))
        })
      ]
    }
  );
};
//# sourceMappingURL=layout-tab.js.map
