"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 design_tab_exports = {};
__export(design_tab_exports, {
  DesignTab: () => DesignTab
});
module.exports = __toCommonJS(design_tab_exports);
var import_design_system = require("@wix/design-system");
var import_wix_ui_icons_common = require("@wix/wix-ui-icons-common");
var import_lodash = __toESM(require("lodash"));
var import_react = __toESM(require("react"));
var import_shared_with_viewer = require("./../../../ricos-common-plugins/layout/shared-with-viewer.js");
var import_ricos_content = require("./../../../ricos-content/index.js");
var import_ricos_context = require("./../../../ricos-context/index.js");
var import_theme_provider = require("./../../../ricos-styles/theme-provider.js");
var import_bi_context_provider = require("./../../../_shared/bi-context-provider/bi-context-provider.js");
var import_colors = require("./../../../_shared/colors.js");
var import_wix_instance_context = require("./../../../_shared/request-service-provider/wix-instance-context.js");
var import_resolve_backward_compat_overlay = require("./../../../_shared/resolve-backward-compat-overlay.js");
var import_resolve_color_to_display_hex = require("./../../../_shared/resolve-color-to-display-hex.js");
var import_schema_gradient_to_css = require("./../../../_shared/schema-gradient-to-css.js");
var import_some_editor_props_context = require("./../../../_shared/some-editor-props-context.js");
var import_toggles_with_label = require("./../../../_shared/toggles-with-label.js");
var import_wix_rich_content_common = require("./../../../wix-rich-content-common/index.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_handle_layout_image_upload = require("../handle-layout-image-upload.js");
var import_layout_fill = require("../layout-fill.js");
var import_background_section = require("../shared-settings-components/background-section.js");
var import_layout_color_picker = require("../shared-settings-components/layout-color-picker.js");
var import_shared = require("../shared.js");
const DesignTab = ({
  pmNodeAttrs,
  patchPmNodeAttrs,
  nodeId,
  config
}) => {
  const { t, isMobile } = (0, import_react.useContext)(import_ricos_context.RicosContext);
  const { getPublicCommands, adapter } = (0, import_react.useContext)(import_ricos_context.EditorContext);
  const wixInstance = (0, import_wix_instance_context.useWixInstanceService)();
  const editorProps = (0, import_some_editor_props_context.useEditorProps)();
  const { uploadService } = (0, import_react.useContext)(import_ricos_context.UploadContext);
  const devService = (0, import_ricos_context.useDevService)();
  const containerEl = (0, import_ui_components.usePanelContainerElement)();
  const zIndexService = (0, import_react.useContext)(import_ricos_context.ZIndexContext);
  const zIndex = zIndexService.getZIndex("DIALOG");
  const modalService = (0, import_react.useContext)(import_ricos_context.ModalServiceContext);
  const theme = (0, import_theme_provider.useTheme)();
  const currentBackground = (0, import_layout_fill.resolveLayoutFill)(pmNodeAttrs.background, pmNodeAttrs.backgroundColor);
  const currentBackdrop = (0, import_layout_fill.resolveLayoutFill)(pmNodeAttrs.backdrop, pmNodeAttrs.backdropColor);
  const getFreshAttrs = () => {
    const tr = adapter.tiptapEditor.view.state.tr;
    const fresh = (0, import_helpers.findNodeById)(tr, nodeId)[0]?.node.attrs;
    return fresh ?? pmNodeAttrs;
  };
  const logBi = (0, import_bi_context_provider.useBiNext)({
    modalId: import_data_hooks.LAYOUT_SETTINGS_MODAL_ID,
    pluginId: "layout",
    nodeId
  });
  const [showBackdropSection, setShowBackdropSection] = import_react.default.useState(() => {
    const hasBackdropPadding = pmNodeAttrs.backdropPaddingTop || pmNodeAttrs.backdropPaddingBottom;
    return !!(pmNodeAttrs.backdropImage || (0, import_layout_fill.hasVisibleLayoutFill)(currentBackdrop) || hasBackdropPadding);
  });
  const [prevBackdrop, setPrevBackdrop] = import_react.default.useState(currentBackdrop);
  const [prevBackdropImage, setPrevBackdropImage] = import_react.default.useState(pmNodeAttrs.backdropImage);
  const [prevBackdropPaddingTop] = import_react.default.useState(pmNodeAttrs.backdropPaddingTop);
  const [prevBackdropPaddingBottom] = import_react.default.useState(pmNodeAttrs.backdropPaddingBottom);
  const backgroundColorPickerRef = (0, import_react.useRef)(null);
  const backdropColorPickerRef = (0, import_react.useRef)(null);
  const borderColorPickerRef = (0, import_react.useRef)(null);
  const openColorPicker = (colorType, referenceElement, fallbackColor) => {
    const modalId = import_data_hooks.CELL_SETTINGS_COLOR_PICKER_MODAL_ID;
    const allowGradient = colorType === "backgroundColor" || colorType === "backdropColor";
    modalService.togglePluginPanel({
      id: modalId,
      Component: import_layout_color_picker.LayoutColorPicker,
      componentProps: {
        modalId,
        nodeId,
        referenceElement,
        colorType,
        fallbackColor,
        onValueSelected: onValueChange(colorType),
        allowGradient
      },
      isMobile,
      positioning: {
        referenceElement,
        placement: "left"
      },
      type: void 0,
      onClickOutside: {
        on: "pointerup",
        handler: import_lodash.default.noop
      },
      focusReturnElement: referenceElement ?? void 0
    });
  };
  const hasNoExistingOverlay = (bgKey) => {
    const fresh = getFreshAttrs();
    const legacyColor = fresh[bgKey === "background" ? "backgroundColor" : "backdropColor"];
    const overlayColor = (0, import_layout_fill.getResolvedLayoutFillColor)(fresh[bgKey], legacyColor ?? void 0);
    return !overlayColor || overlayColor === import_colors.TRANSPARENT_HEX_COLOR;
  };
  const onValueChange = (colorType) => (value) => {
    const applyOverlayAutoAlpha = (v) => {
      if (v?.color && !v.gradient && (0, import_wix_rich_content_common.getOpacityFromHex)(v.color) === 100) {
        return { ...v, color: (0, import_wix_rich_content_common.combineHexWithOpacity)(v.color, 50) ?? v.color };
      }
      return v;
    };
    const freshAttrs = getFreshAttrs();
    if (colorType === "backgroundColor") {
      const hasImage = !!freshAttrs.backgroundImage;
      const adjusted = hasImage && hasNoExistingOverlay("background") ? applyOverlayAutoAlpha(value) : value;
      patchPmNodeAttrs({
        ...(0, import_layout_fill.getLayoutFillPatch)("background", (0, import_layout_fill.toLayoutFill)(adjusted)),
        // Neutralize old imageOpacity so backward compat no longer overrides user alpha
        ...hasImage && {
          backgroundImage: { ...freshAttrs.backgroundImage, opacity: 100 }
        }
      });
    } else if (colorType === "backdropColor") {
      const hasImage = !!freshAttrs.backdropImage;
      const adjusted = hasImage && hasNoExistingOverlay("backdrop") ? applyOverlayAutoAlpha(value) : value;
      patchPmNodeAttrs({
        ...(0, import_layout_fill.getLayoutFillPatch)("backdrop", (0, import_layout_fill.toLayoutFill)(adjusted)),
        ...hasImage && {
          backdropImage: { ...freshAttrs.backdropImage, opacity: 100 }
        }
      });
    } else {
      const currentBorderWidth = pmNodeAttrs.borderWidth ?? import_shared_with_viewer.LAYOUT_DEFAULTS.borderWidth;
      const borderWidthUpdate = currentBorderWidth === 0 ? { borderWidth: 1 } : {};
      patchPmNodeAttrs({
        borderColor: value?.color ?? import_colors.TRANSPARENT_HEX_COLOR,
        ...borderWidthUpdate
      });
    }
  };
  const onColorChange = (colorType) => (color) => onValueChange(colorType)(color ? { color } : void 0);
  const onBgImageRequest = async (key) => {
    await (0, import_handle_layout_image_upload.handleLayoutImageUpload)({
      services: {
        devService,
        uploadService,
        editorProps,
        wixInstance,
        modals: modalService
      },
      config,
      publicCommands: getPublicCommands(),
      nodeId,
      nodeType: import_ricos_content.RICOS_LAYOUT_TYPE,
      attributeKey: key
    });
  };
  const onBgImageRemove = (key) => patchPmNodeAttrs({ [key]: void 0 });
  const onBackgroundChange = (newValue, key) => {
    const bgKey = key === "backgroundImage" ? "background" : "backdrop";
    const freshAttrs = getFreshAttrs();
    const currentImage = freshAttrs[key];
    const hasImage = !!currentImage;
    const shouldAutoAlpha = hasImage && hasNoExistingOverlay(bgKey);
    const colorPatch = "color" in newValue && newValue.color && shouldAutoAlpha && (0, import_wix_rich_content_common.getOpacityFromHex)(newValue.color) === 100 ? (0, import_layout_fill.getLayoutFillPatch)(
      bgKey,
      (0, import_layout_fill.toLayoutFill)({ color: (0, import_wix_rich_content_common.combineHexWithOpacity)(newValue.color, 50) ?? newValue.color })
    ) : "color" in newValue ? (0, import_layout_fill.getLayoutFillPatch)(bgKey, (0, import_layout_fill.toLayoutFill)({ color: newValue.color })) : void 0;
    patchPmNodeAttrs({
      ...colorPatch,
      // Neutralize old imageOpacity so backward compat no longer overrides user alpha
      ...colorPatch && currentImage && { [key]: { ...currentImage, opacity: 100 } },
      ..."image" in newValue && { [key]: newValue.image },
      ..."imageScaling" in newValue && currentImage && {
        [key]: {
          ...currentImage,
          scaling: newValue.imageScaling
        }
      },
      ..."imagePosition" in newValue && currentImage && {
        [key]: {
          ...currentImage,
          position: newValue.imagePosition
        }
      },
      ..."imageBlur" in newValue && currentImage && {
        [key]: {
          ...currentImage,
          blur: newValue.imageBlur
        }
      }
    });
  };
  const onBorderWidthChange = (width) => patchPmNodeAttrs({ borderWidth: width ?? 0 });
  const onBorderRadiusChange = (radius) => patchPmNodeAttrs({ borderRadius: radius ?? 0 });
  const backgroundGradient = currentBackground?.type === "GRADIENT" ? (0, import_schema_gradient_to_css.schemaGradientToCss)(currentBackground.gradient, theme.colorPalette) : void 0;
  const themeBackgroundColor = (0, import_resolve_color_to_display_hex.resolveColorToDisplayHex)(
    "var(--ricos-custom-layout-background-color)",
    containerEl
  );
  const rawBackgroundColor = (currentBackground?.type === "COLOR" ? currentBackground.color : void 0) ?? themeBackgroundColor;
  const backgroundColorValue = rawBackgroundColor ? (0, import_resolve_backward_compat_overlay.resolveBackwardCompatOverlay)(
    rawBackgroundColor,
    pmNodeAttrs.backgroundImage?.opacity ?? 100,
    100
  ) : rawBackgroundColor;
  const backdropGradient = currentBackdrop?.type === "GRADIENT" ? (0, import_schema_gradient_to_css.schemaGradientToCss)(currentBackdrop.gradient, theme.colorPalette) : void 0;
  const themeBackdropColor = (0, import_resolve_color_to_display_hex.resolveColorToDisplayHex)(
    "var(--ricos-custom-layout-backdrop-color)",
    containerEl
  );
  const rawBackdropColor = (currentBackdrop?.type === "COLOR" ? currentBackdrop.color : void 0) ?? themeBackdropColor;
  const backdropColorValue = rawBackdropColor ? (0, import_resolve_backward_compat_overlay.resolveBackwardCompatOverlay)(rawBackdropColor, pmNodeAttrs.backdropImage?.opacity ?? 100, 100) : rawBackdropColor;
  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_Design_Background_Label"))), /* @__PURE__ */ import_react.default.createElement(
    import_background_section.BackgroundSection,
    {
      imageLoading: pmNodeAttrs.loading?.backgroundImage,
      image: pmNodeAttrs.backgroundImage,
      imageScaling: pmNodeAttrs.backgroundImage?.scaling ?? "CONTAIN",
      imagePosition: pmNodeAttrs.backgroundImage?.position ?? "CENTER",
      imageBlur: pmNodeAttrs.backgroundImage?.blur ?? 0,
      color: backgroundColorValue ?? import_colors.TRANSPARENT_HEX_COLOR,
      gradient: backgroundGradient,
      onChange: (newValue) => onBackgroundChange(newValue, "backgroundImage"),
      openColorPicker: () => {
        openColorPicker(
          "backgroundColor",
          backgroundColorPickerRef.current,
          backgroundColorValue
        );
        logBi({ dataHook: import_data_hooks.LAYOUT_SETTINGS_BACKGROUND_COLOR_PICKER });
      },
      colorPickerRef: backgroundColorPickerRef,
      backgroundTypeToggleDataHook: import_data_hooks.LAYOUT_SETTINGS_BACKGROUND_TYPE_TOGGLE,
      colorDataHook: import_data_hooks.LAYOUT_SETTINGS_BACKGROUND_COLOR_INPUT,
      colorPickerDataHook: import_data_hooks.LAYOUT_SETTINGS_BACKGROUND_COLOR_PICKER,
      imageDataHook: import_data_hooks.LAYOUT_SETTINGS_BACKGROUND_IMAGE_VIEWER,
      imageScalingDataHook: import_data_hooks.LAYOUT_SETTINGS_BACKGROUND_SCALING_SELECT,
      imagePositionDataHook: import_data_hooks.LAYOUT_SETTINGS_BACKGROUND_POSITION_SELECT,
      imageBlurDataHook: import_data_hooks.LAYOUT_SETTINGS_BACKGROUND_BLUR_INPUT,
      onImageRequest: () => onBgImageRequest("backgroundImage"),
      onImageRemove: () => onBgImageRemove("backgroundImage"),
      logBi
    }
  ), /* @__PURE__ */ import_react.default.createElement(
    import_ui_components.ColorWithOpacityInput,
    {
      label: t("Layout_SettingsModal_Tab_Design_Container_BorderColor"),
      fill: {
        type: "color",
        color: pmNodeAttrs.borderColor ?? import_colors.TRANSPARENT_HEX_COLOR,
        onChange: onColorChange("borderColor"),
        allowTransparent: true
      },
      onColorPress: () => openColorPicker("borderColor", borderColorPickerRef.current),
      colorPickerRef: borderColorPickerRef,
      inputDataHook: import_data_hooks.LAYOUT_SETTINGS_BORDER_COLOR_INPUT,
      fillPreviewDataHook: import_data_hooks.LAYOUT_SETTINGS_BORDER_COLOR_PICKER,
      zIndex,
      logBi
    }
  ), /* @__PURE__ */ import_react.default.createElement(
    import_ui_components.NumberInputWithLabel,
    {
      label: t("Layout_SettingsModal_Tab_Design_Container_BorderWidth"),
      dataHook: import_data_hooks.LAYOUT_SETTINGS_BORDER_WIDTH_INPUT,
      suffix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, t("Common_Units_PX")),
      value: pmNodeAttrs.borderWidth ?? import_shared_with_viewer.LAYOUT_DEFAULTS.borderWidth,
      min: 0,
      max: 15,
      onChange: onBorderWidthChange,
      logBi,
      zIndex
    }
  ), /* @__PURE__ */ import_react.default.createElement(
    import_ui_components.NumberInputWithLabel,
    {
      label: t("Layout_SettingsModal_Tab_Design_Container_BorderRadius"),
      dataHook: import_data_hooks.LAYOUT_SETTINGS_BORDER_RADIUS_INPUT,
      suffix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, t("Common_Units_PX")),
      value: pmNodeAttrs.borderRadius ?? import_shared_with_viewer.LAYOUT_DEFAULTS.borderRadius,
      min: 0,
      max: 30,
      onChange: onBorderRadiusChange,
      logBi,
      zIndex
    }
  ), /* @__PURE__ */ import_react.default.createElement(
    import_toggles_with_label.TogglesWithLabel,
    {
      label: t("Layout_SettingsModal_Tab_Layout_Design_Target_Label"),
      value: pmNodeAttrs.designTarget || import_shared_with_viewer.LAYOUT_DEFAULTS.designTarget,
      options: [
        {
          label: t("Layout_SettingsModal_Tab_Layout_Design_Target_Cell"),
          value: "LAYOUT",
          icon: /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.LayoutFullSmall, { height: "100%" }),
          dataHook: import_data_hooks.LAYOUT_SETTINGS_DESIGN_TARGET_LAYOUT
        },
        {
          label: t("Layout_SettingsModal_Tab_Layout_Design_Target_Layout"),
          value: "CELL",
          icon: /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.LayoutTwoColumnsSplitSmall, { height: "100%" }),
          dataHook: import_data_hooks.LAYOUT_SETTINGS_DESIGN_TARGET_CELL
        }
      ],
      onChange: (value) => patchPmNodeAttrs({ designTarget: value })
    }
  )), /* @__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: "SP1" }, /* @__PURE__ */ import_react.default.createElement(import_design_system.Text, { size: "small", weight: "bold" }, t("Layout_SettingsModal_Tab_Design_Backdrop_Label"))), /* @__PURE__ */ import_react.default.createElement(
    import_ui_components.ToggleButton,
    {
      checked: showBackdropSection,
      title: t("Layout_SettingsModal_Tab_Design_Backdrop_Toggle_Label"),
      size: "small",
      dataHook: import_data_hooks.LAYOUT_SETTINGS_BACKDROP_TOGGLE,
      onChange: () => {
        setShowBackdropSection((prev) => !prev);
        if (!showBackdropSection) {
          patchPmNodeAttrs({
            ...(0, import_layout_fill.getLayoutFillPatch)("backdrop", (0, import_layout_fill.clearTransparentLayoutFill)(prevBackdrop)),
            backdropPaddingTop: prevBackdropPaddingTop || import_shared.DEFAULT_BACKDROP_VERTICAL_SPACING,
            backdropPaddingBottom: prevBackdropPaddingBottom || import_shared.DEFAULT_BACKDROP_VERTICAL_SPACING,
            backdropImage: prevBackdropImage
          });
          return;
        }
        setPrevBackdrop(currentBackdrop);
        setPrevBackdropImage(pmNodeAttrs.backdropImage);
        patchPmNodeAttrs({
          ...(0, import_layout_fill.getLayoutFillPatch)("backdrop", void 0),
          backdropImage: void 0,
          backdropPaddingTop: void 0,
          backdropPaddingBottom: void 0
        });
      },
      infoContent: t("Layout_SettingsModal_Tab_Design_Backdrop_Toggle_Tooltip"),
      tooltipAppendTo: containerEl
    }
  ), showBackdropSection && /* @__PURE__ */ import_react.default.createElement(
    import_background_section.BackgroundSection,
    {
      imageLoading: pmNodeAttrs.loading?.backdropImage,
      image: pmNodeAttrs.backdropImage,
      imageScaling: pmNodeAttrs.backdropImage?.scaling ?? "CONTAIN",
      imagePosition: pmNodeAttrs.backdropImage?.position ?? "CENTER",
      imageBlur: pmNodeAttrs.backdropImage?.blur ?? 0,
      color: backdropColorValue ?? import_colors.TRANSPARENT_HEX_COLOR,
      gradient: backdropGradient,
      onChange: (newValue) => onBackgroundChange(newValue, "backdropImage"),
      openColorPicker: () => {
        openColorPicker("backdropColor", backdropColorPickerRef.current, backdropColorValue);
        logBi({ dataHook: import_data_hooks.LAYOUT_SETTINGS_BACKDROP_COLOR_PICKER });
      },
      colorPickerRef: backdropColorPickerRef,
      backgroundTypeToggleDataHook: import_data_hooks.LAYOUT_SETTINGS_BACKDROP_TYPE_TOGGLE,
      colorDataHook: import_data_hooks.LAYOUT_SETTINGS_BACKDROP_COLOR_INPUT,
      colorPickerDataHook: import_data_hooks.LAYOUT_SETTINGS_BACKDROP_COLOR_PICKER,
      imageDataHook: import_data_hooks.LAYOUT_SETTINGS_BACKDROP_IMAGE_VIEWER,
      imageScalingDataHook: import_data_hooks.LAYOUT_SETTINGS_BACKDROP_SCALING_SELECT,
      imagePositionDataHook: import_data_hooks.LAYOUT_SETTINGS_BACKDROP_POSITION_SELECT,
      imageBlurDataHook: import_data_hooks.LAYOUT_SETTINGS_BACKDROP_BLUR_INPUT,
      onImageRequest: () => onBgImageRequest("backdropImage"),
      onImageRemove: () => onBgImageRemove("backdropImage"),
      logBi
    }
  )));
};
//# sourceMappingURL=design-tab.js.map
