"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/index.js");
var import_ricos_context2 = require("./../../../ricos-context/ricos-context.js");
var import_bi_context_provider = require("./../../../_shared/bi-context-provider/bi-context-provider.js");
var import_toggles_with_label = require("./../../../_shared/toggles-with-label.js");
var import_ui_components = require("./../../../ui-components/index.js");
var import_data_hooks = require("../data-hooks.js");
var import_shared_with_viewer = require("../shared-with-viewer.js");
const LayoutTab = ({ pmNodeAttrs, patchPmNodeAttrs, nodeId }) => {
  const { t } = (0, import_react.useContext)(import_ricos_context2.RicosContext);
  const [responsivenessExpanded, setResponsivenessExpanded] = (0, import_react.useState)(
    pmNodeAttrs.responsivenessBehaviour !== import_shared_with_viewer.LAYOUT_DEFAULTS.responsivenessBehaviour || pmNodeAttrs.responsivenessBreakpoint !== import_shared_with_viewer.LAYOUT_DEFAULTS.responsivenessBreakpoint
  );
  const zIndexService = (0, import_react.useContext)(import_ricos_context.ZIndexContext);
  const zIndex = zIndexService.getZIndex("DIALOG");
  const containerEl = (0, import_ui_components.usePanelContainerElement)();
  const logBi = (0, import_bi_context_provider.useBiNext)({ modalId: import_data_hooks.LAYOUT_SETTINGS_MODAL_ID, pluginId: "layout", nodeId });
  const padding = pmNodeAttrs.cellPadding ?? [...import_shared_with_viewer.LAYOUT_DEFAULTS.cellPadding];
  const onPaddingChange = (cellPadding) => {
    patchPmNodeAttrs({ cellPadding });
  };
  return /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "vertical", overflow: "auto" }, /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "vertical", padding: "SP4", paddingTop: "SP3", paddingBottom: "SP3", gap: "SP2" }, /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { paddingBottom: "SP1" }, /* @__PURE__ */ import_react.default.createElement(import_design_system.Text, { size: "small", weight: "bold" }, t("Layout_SettingsModal_Tab_Layout_Spacing_Label"))), /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "vertical", gap: "SP2" }, /* @__PURE__ */ import_react.default.createElement(import_design_system.FormField, { inputWidth: "100%" }, /* @__PURE__ */ import_react.default.createElement(
    import_design_system.FieldSet,
    {
      alignment: "center",
      legend: t("Layout_SettingsModal_Tab_Layout_Gaps_Label"),
      infoContent: t("Layout_SettingsModal_Tab_Layout_Gaps_Tooltip"),
      infoTooltipProps: { appendTo: containerEl, zIndex }
    },
    /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "horizontal", paddingRight: "SP1", width: "50%" }, /* @__PURE__ */ import_react.default.createElement(
      import_ui_components.InputWithSlider,
      {
        value: pmNodeAttrs.gap ?? import_shared_with_viewer.LAYOUT_DEFAULTS.gap,
        dataHook: import_data_hooks.LAYOUT_SETTINGS_GAP,
        onChange: (value) => {
          logBi({ dataHook: import_data_hooks.LAYOUT_SETTINGS_GAP, value });
          patchPmNodeAttrs({ gap: value });
        },
        zIndex,
        prefix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.MoveSmall, null)),
        suffix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, t("Common_Units_PX")),
        min: 0,
        max: 100
      }
    ))
  )), /* @__PURE__ */ import_react.default.createElement(
    PaddingFieldWithLabel,
    {
      logBi,
      label: t("Layout_SettingsModal_Tab_Layout_Padding_Label"),
      infoContent: t("Layout_SettingsModal_Tab_Layout_Padding_Tooltip"),
      padding,
      onChange: onPaddingChange
    }
  ), /* @__PURE__ */ import_react.default.createElement(
    VerticalMarginWithLabel,
    {
      logBi,
      label: t("Layout_SettingsModal_Tab_Layout_VerticalMargin_Label"),
      infoContent: t("Layout_SettingsModal_Tab_Layout_VerticalMargin_Tooltip"),
      marginTop: pmNodeAttrs.backdropPaddingTop ?? import_shared_with_viewer.LAYOUT_DEFAULTS.backdropPaddingTop,
      marginBottom: pmNodeAttrs.backdropPaddingBottom ?? import_shared_with_viewer.LAYOUT_DEFAULTS.backdropPaddingBottom,
      isBanner: !!pmNodeAttrs.banner,
      onChange: (marginTop, marginBottom) => {
        patchPmNodeAttrs({
          backdropPaddingTop: marginTop,
          backdropPaddingBottom: marginBottom
        });
      }
    }
  ))), /* @__PURE__ */ import_react.default.createElement(import_design_system.Divider, null), /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "vertical", padding: "SP4", paddingTop: "SP3", paddingBottom: "SP3", gap: "SP2" }, /* @__PURE__ */ import_react.default.createElement(
    import_design_system.Box,
    {
      paddingBottom: responsivenessExpanded ? "SP1" : void 0,
      direction: "horizontal",
      align: "space-between",
      verticalAlign: "middle"
    },
    /* @__PURE__ */ import_react.default.createElement(import_design_system.Text, { size: "small", weight: "bold" }, t("Layout_SettingsModal_Tab_Layout_Responsivness_Label")),
    /* @__PURE__ */ import_react.default.createElement(
      import_design_system.IconButton,
      {
        size: "small",
        skin: "dark",
        priority: "tertiary",
        onClick: () => {
          setResponsivenessExpanded((prev) => !prev);
          logBi({
            dataHook: import_data_hooks.LAYOUT_SETTINGS_RESPONSIVENESS_HEADER_TOGGLE,
            value: !responsivenessExpanded
          });
        },
        dataHook: import_data_hooks.LAYOUT_SETTINGS_RESPONSIVENESS_HEADER_TOGGLE
      },
      responsivenessExpanded ? /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.ChevronUpSmall, null) : /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.ChevronDownSmall, null)
    )
  ), responsivenessExpanded && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
    import_toggles_with_label.TogglesWithLabel,
    {
      label: t("Layout_SettingsModal_Tab_Layout_Responsivness_Behaviour_Label"),
      infoContent: t("Layout_SettingsModal_Tab_Layout_Responsivness_Behaviour_Tooltip"),
      value: pmNodeAttrs.responsivenessBehaviour || import_shared_with_viewer.LAYOUT_DEFAULTS.responsivenessBehaviour,
      options: [
        {
          label: t("Layout_SettingsModal_Tab_Layout_Responsivness_Behaviour_Stack"),
          value: "STACK",
          icon: /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.StackVerticalSmall, { height: "100%" }),
          dataHook: import_data_hooks.LAYOUT_SETTINGS_RESPONSIVENESS_BEHAVIOUR_STACK
        },
        {
          label: t("Layout_SettingsModal_Tab_Layout_Responsivness_Behaviour_Wrap"),
          value: "WRAP",
          icon: /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.WrapSmall, { height: "100%" }),
          dataHook: import_data_hooks.LAYOUT_SETTINGS_RESPONSIVENESS_BEHAVIOUR_WRAP
        }
      ],
      onChange: (value) => patchPmNodeAttrs({ responsivenessBehaviour: value })
    }
  ), /* @__PURE__ */ import_react.default.createElement(
    import_ui_components.NumberInputWithLabel,
    {
      label: t("Layout_SettingsModal_Tab_Layout_Responsivness_Breakpoint_Label"),
      infoContent: t("Layout_SettingsModal_Tab_Layout_Responsivness_Breakpoint_Tooltip"),
      dataHook: import_data_hooks.LAYOUT_SETTINGS_RESPONSIVENESS_BREAKPOINT_INPUT,
      suffix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, t("Common_Units_PX")),
      value: pmNodeAttrs.responsivenessBreakpoint ?? import_shared_with_viewer.LAYOUT_DEFAULTS.responsivenessBreakpoint,
      min: 0,
      max: 1200,
      onChange: (value) => patchPmNodeAttrs({ responsivenessBreakpoint: value }),
      logBi,
      zIndex,
      tooltipAppendTo: containerEl
    }
  ))));
};
const VerticalMarginWithLabel = ({
  logBi,
  label,
  infoContent,
  marginTop,
  marginBottom,
  isBanner = false,
  onChange
}) => {
  const { t } = (0, import_react.useContext)(import_ricos_context2.RicosContext);
  const zIndexService = (0, import_react.useContext)(import_ricos_context.ZIndexContext);
  const zIndex = zIndexService.getZIndex("DIALOG");
  const containerEl = (0, import_ui_components.usePanelContainerElement)();
  const [mode, setMode] = (0, import_react.useState)(() => {
    if (isBanner || marginTop === marginBottom) {
      return "directional";
    }
    return "individual";
  });
  const effectiveMode = isBanner ? "directional" : mode;
  return /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "vertical" }, /* @__PURE__ */ import_react.default.createElement(import_design_system.FormField, { inputWidth: "100%" }, /* @__PURE__ */ import_react.default.createElement(
    import_design_system.FieldSet,
    {
      alignment: "center",
      legend: label,
      infoContent,
      infoTooltipProps: { appendTo: containerEl, zIndex },
      suffix: (
        // Hide toggle button for banner layouts - they always use directional mode
        isBanner ? void 0 : /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { width: "24px", height: "24px", align: "center", verticalAlign: "middle" }, /* @__PURE__ */ import_react.default.createElement(
          import_design_system.ToggleButton,
          {
            border: true,
            labelValue: t(
              "Layout_SettingsModal_Tab_Layout_VerticalMargin_ToggleInidividual_Tooltip"
            ),
            size: "tiny",
            tooltipProps: { appendTo: containerEl, zIndex },
            selected: mode === "individual",
            onClick: () => {
              setMode(() => mode === "individual" ? "directional" : "individual");
              logBi({
                dataHook: import_data_hooks.LAYOUT_SETTINGS_VERTICAL_MARGIN_TOGGLE_INDIVIDUAL,
                value: mode === "individual" ? "directional" : "individual"
              });
              if (mode === "individual") {
                onChange(marginTop, marginTop);
              }
            },
            dataHook: import_data_hooks.LAYOUT_SETTINGS_VERTICAL_MARGIN_TOGGLE_INDIVIDUAL
          },
          /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.IndividualPaddingsSmall, null)
        ))
      )
    },
    (() => {
      switch (effectiveMode) {
        case "individual":
          return /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "horizontal", gap: "SP2" }, /* @__PURE__ */ import_react.default.createElement(
            import_ui_components.InputWithSlider,
            {
              value: marginTop,
              onChange: (value) => {
                onChange(value, marginBottom);
                logBi({
                  dataHook: import_data_hooks.LAYOUT_SETTINGS_VERTICAL_MARGIN_TOP,
                  value
                });
              },
              dataHook: import_data_hooks.LAYOUT_SETTINGS_VERTICAL_MARGIN_TOP,
              zIndex,
              prefix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.PaddingTopSmall, null)),
              suffix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, t("Common_Units_PX")),
              min: 0,
              max: import_shared_with_viewer.MAX_VERTICAL_MARGIN
            }
          ), /* @__PURE__ */ import_react.default.createElement(
            import_ui_components.InputWithSlider,
            {
              value: marginBottom,
              onChange: (value) => {
                onChange(marginTop, value);
                logBi({
                  dataHook: import_data_hooks.LAYOUT_SETTINGS_VERTICAL_MARGIN_BOTTOM,
                  value
                });
              },
              dataHook: import_data_hooks.LAYOUT_SETTINGS_VERTICAL_MARGIN_BOTTOM,
              zIndex,
              prefix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.PaddingBottomSmall, null)),
              suffix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, t("Common_Units_PX")),
              min: 0,
              max: import_shared_with_viewer.MAX_VERTICAL_MARGIN
            }
          ));
        case "directional":
          return /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "horizontal", paddingRight: "SP1", width: "50%" }, /* @__PURE__ */ import_react.default.createElement(
            import_ui_components.InputWithSlider,
            {
              value: marginTop,
              onChange: (value) => {
                onChange(value, value);
                logBi({
                  dataHook: import_data_hooks.LAYOUT_SETTINGS_VERTICAL_MARGIN,
                  value
                });
              },
              dataHook: import_data_hooks.LAYOUT_SETTINGS_VERTICAL_MARGIN,
              zIndex,
              prefix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.PaddingVerticalSmall, null)),
              suffix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, t("Common_Units_PX")),
              min: 0,
              max: import_shared_with_viewer.MAX_VERTICAL_MARGIN
            }
          ));
        default:
          return null;
      }
    })()
  )));
};
const PaddingFieldWithLabel = ({
  logBi,
  label,
  infoContent,
  padding,
  onChange
}) => {
  const { t } = (0, import_react.useContext)(import_ricos_context2.RicosContext);
  const zIndexService = (0, import_react.useContext)(import_ricos_context.ZIndexContext);
  const zIndex = zIndexService.getZIndex("DIALOG");
  const containerEl = (0, import_ui_components.usePanelContainerElement)();
  const paddingTop = padding[0];
  const paddingRight = padding[1];
  const paddingBottom = padding[2];
  const paddingLeft = padding[3];
  const [mode, setMode] = (0, import_react.useState)(() => {
    if (paddingLeft === paddingRight && paddingTop === paddingBottom) {
      return "directional";
    }
    return "individual";
  });
  return /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "vertical" }, /* @__PURE__ */ import_react.default.createElement(import_design_system.FormField, { inputWidth: "100%" }, /* @__PURE__ */ import_react.default.createElement(
    import_design_system.FieldSet,
    {
      alignment: "center",
      legend: label,
      infoContent,
      infoTooltipProps: { appendTo: containerEl, zIndex },
      suffix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { width: "24px", height: "24px", align: "center", verticalAlign: "middle" }, /* @__PURE__ */ import_react.default.createElement(
        import_design_system.ToggleButton,
        {
          border: true,
          labelValue: t("Layout_SettingsModal_Tab_Layout_Padding_ToggleIndividual"),
          size: "tiny",
          tooltipProps: { appendTo: containerEl, zIndex },
          selected: mode === "individual",
          onClick: () => {
            setMode(() => mode === "individual" ? "directional" : "individual");
            logBi({
              dataHook: import_data_hooks.LAYOUT_SETTINGS_PADDING_TOGGLE_INDIVIDUAL,
              value: mode === "individual" ? "directional" : "individual"
            });
            if (mode === "individual") {
              onChange([paddingTop, paddingLeft, paddingTop, paddingLeft]);
            }
          },
          dataHook: import_data_hooks.LAYOUT_SETTINGS_PADDING_TOGGLE_INDIVIDUAL
        },
        /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.IndividualPaddingsSmall, null)
      ))
    },
    (() => {
      switch (mode) {
        case "individual":
          return /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "vertical", gap: "SP1" }, /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "horizontal", gap: "SP2" }, /* @__PURE__ */ import_react.default.createElement(
            import_ui_components.InputWithSlider,
            {
              value: paddingLeft,
              onChange: (value) => {
                onChange([paddingTop, paddingRight, paddingBottom, value]);
                logBi({
                  dataHook: import_data_hooks.LAYOUT_SETTINGS_PADDING_LEFT,
                  value
                });
              },
              dataHook: import_data_hooks.LAYOUT_SETTINGS_PADDING_LEFT,
              zIndex,
              prefix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.PaddingLeftSmall, null)),
              suffix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, t("Common_Units_PX")),
              min: 0,
              max: 100
            }
          ), /* @__PURE__ */ import_react.default.createElement(
            import_ui_components.InputWithSlider,
            {
              value: paddingTop,
              onChange: (value) => {
                onChange([value, paddingRight, paddingBottom, paddingLeft]);
                logBi({
                  dataHook: import_data_hooks.LAYOUT_SETTINGS_PADDING_TOP,
                  value
                });
              },
              dataHook: import_data_hooks.LAYOUT_SETTINGS_PADDING_TOP,
              zIndex,
              prefix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.PaddingTopSmall, null)),
              suffix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, t("Common_Units_PX")),
              min: 0,
              max: 100
            }
          )), /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "horizontal", gap: "SP2" }, /* @__PURE__ */ import_react.default.createElement(
            import_ui_components.InputWithSlider,
            {
              value: paddingRight,
              onChange: (value) => {
                onChange([paddingTop, value, paddingBottom, paddingLeft]);
                logBi({
                  dataHook: import_data_hooks.LAYOUT_SETTINGS_PADDING_RIGHT,
                  value
                });
              },
              dataHook: import_data_hooks.LAYOUT_SETTINGS_PADDING_RIGHT,
              zIndex,
              prefix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.PaddingRightSmall, null)),
              suffix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, t("Common_Units_PX")),
              min: 0,
              max: 100
            }
          ), /* @__PURE__ */ import_react.default.createElement(
            import_ui_components.InputWithSlider,
            {
              value: paddingBottom,
              onChange: (value) => {
                onChange([paddingTop, paddingRight, value, paddingLeft]);
                logBi({
                  dataHook: import_data_hooks.LAYOUT_SETTINGS_PADDING_BOTTOM,
                  value
                });
              },
              dataHook: import_data_hooks.LAYOUT_SETTINGS_PADDING_BOTTOM,
              zIndex,
              prefix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.PaddingBottomSmall, null)),
              suffix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, t("Common_Units_PX")),
              min: 0,
              max: 100
            }
          )));
        case "directional":
          return /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "horizontal", gap: "SP2" }, /* @__PURE__ */ import_react.default.createElement(
            import_ui_components.InputWithSlider,
            {
              value: paddingLeft,
              onChange: (value) => {
                onChange([paddingTop, value, paddingTop, value]);
                logBi({
                  dataHook: import_data_hooks.LAYOUT_SETTINGS_PADDING_HORIZONTAL,
                  value
                });
              },
              dataHook: import_data_hooks.LAYOUT_SETTINGS_PADDING_HORIZONTAL,
              zIndex,
              prefix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.PaddingHorizontalSmall, null)),
              suffix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, t("Common_Units_PX")),
              min: 0,
              max: 100
            }
          ), /* @__PURE__ */ import_react.default.createElement(
            import_ui_components.InputWithSlider,
            {
              value: paddingTop,
              onChange: (value) => {
                onChange([value, paddingRight, value, paddingRight]);
                logBi({
                  dataHook: import_data_hooks.LAYOUT_SETTINGS_PADDING_VERTICAL,
                  value
                });
              },
              dataHook: import_data_hooks.LAYOUT_SETTINGS_PADDING_VERTICAL,
              zIndex,
              prefix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.PaddingVerticalSmall, null)),
              suffix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, t("Common_Units_PX")),
              min: 0,
              max: 100
            }
          ));
        default:
          return null;
      }
    })()
  )));
};
//# sourceMappingURL=layout-tab.js.map
