"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_modal_context = require("./../../ricos-context/modal-context.js");
var import_ricos_context = require("./../../ricos-context/ricos-context.js");
var import_z_index_context = require("./../../ricos-context/z-index-context.js");
var import_v1 = require("./../../ricos-schema/legacy/wix/rich_content/v1/index.js");
var import_bi_context_provider = require("./../../_shared/bi-context-provider/bi-context-provider.js");
var import_use_resolve_display_color = require("./../../_shared/use-resolve-display-color.js");
var import_link_preview_color_picker = require("./../../plugin-link-preview/components/link-preview-color-picker.js");
var import_consts = require("./../../plugin-link-preview/consts.js");
var import_data_hooks = require("./../../plugin-link-preview/data-hooks.js");
var import_ui_components = require("./../../ui-components/index.js");
var import_number_input_with_label = require("./../../ui-components/number-input-with-label/number-input-with-label.js");
const DesignTab = ({ nodeId, config, modalId, pmNodeAttrs, patchPmNodeAttrs }) => {
  const { t, isMobile, languageDir } = (0, import_react.useContext)(import_ricos_context.RicosContext);
  const isRTL = languageDir === "rtl";
  const modalService = (0, import_react.useContext)(import_modal_context.ModalServiceContext) || {};
  const containerEl = (0, import_ui_components.usePanelContainerElement)();
  const zIndexService = (0, import_react.useContext)(import_z_index_context.ZIndexContext);
  const zIndex = zIndexService.getZIndex("DIALOG");
  const defaultColors = {
    backgroundColor: "#FFFFFF00",
    titleColor: "#000624",
    subtitleColor: "#44485F",
    linkColor: "#868AA5",
    borderColor: "#00000033"
  };
  const backgroundPickerToggleRef = (0, import_react.useRef)(null);
  const titlePickerToggleRef = (0, import_react.useRef)(null);
  const subtitlePickerToggleRef = (0, import_react.useRef)(null);
  const linkPickerToggleRef = (0, import_react.useRef)(null);
  const borderPickerToggleRef = (0, import_react.useRef)(null);
  const getPickerToggleRef = (colorType) => {
    switch (colorType) {
      case "backgroundColor":
        return backgroundPickerToggleRef.current;
      case "titleColor":
        return titlePickerToggleRef.current;
      case "subtitleColor":
        return subtitlePickerToggleRef.current;
      case "linkColor":
        return linkPickerToggleRef.current;
      case "borderColor":
        return borderPickerToggleRef.current;
      default:
        return null;
    }
  };
  const openColorPicker = (colorType) => {
    const modalId2 = import_consts.linkPreviewModals.colorPicker;
    const referenceElement = getPickerToggleRef(colorType) ?? void 0;
    modalService.togglePluginPanel({
      id: modalId2,
      Component: import_link_preview_color_picker.LinkPreviewColorPicker,
      componentProps: {
        modalId: modalId2,
        nodeId,
        referenceElement,
        config,
        colorType,
        onColorSelected: onColorChange(colorType),
        onColorAdded: getLegacyOnColorAdded(colorType),
        defaultColor: defaultColors[colorType]
      },
      isMobile,
      positioning: {
        referenceElement,
        placement: "left"
      },
      type: void 0,
      onClickOutside: {
        on: "pointerup",
        handler: import_lodash.default.noop
      },
      focusReturnElement: referenceElement ?? void 0
    });
  };
  const onColorChange = (colorType) => (color) => {
    patchPmNodeAttrs({ styles: { ...pmNodeAttrs?.styles, [colorType]: color } });
  };
  const resolveDisplayColor = (0, import_use_resolve_display_color.useResolveDisplayColor)();
  const getLegacyOnColorAdded = (colorType) => {
    switch (colorType) {
      case "backgroundColor":
        return config.onBackgroundColorAdded;
      case "titleColor":
        return config.onTitleColorAdded;
      case "subtitleColor":
        return config.onSubtitleColorAdded;
      case "linkColor":
        return config.onLinkColorAdded;
      case "borderColor":
        return config.onBorderColorAdded;
      default:
        return void 0;
    }
  };
  const logBi = (0, import_bi_context_provider.useBiNext)({ modalId, pluginId: "linkPreview" });
  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", gap: "SP2", padding: "SP3" }, /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "vertical", 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("LinkPreview_Design_Panel_Image"))), /* @__PURE__ */ import_react.default.createElement(
    import_design_system.FormField,
    {
      label: t("LinkPreview_Design_Panel_Image_Display_Show"),
      labelPlacement: "left",
      labelWidth: "1fr"
    },
    /* @__PURE__ */ import_react.default.createElement(
      import_design_system.ToggleSwitch,
      {
        checked: pmNodeAttrs?.styles?.thumbnailPosition !== "HIDDEN",
        dataHook: import_data_hooks.SETTINGS_LINKPREVIEW_IMAGE_DISPLAY_TOGGLE,
        onChange: () => {
          const nextPosition = pmNodeAttrs?.styles?.thumbnailPosition === "HIDDEN" ? "START" : "HIDDEN";
          logBi({
            dataHook: import_data_hooks.SETTINGS_LINKPREVIEW_IMAGE_DISPLAY_TOGGLE,
            value: nextPosition !== "HIDDEN"
          });
          patchPmNodeAttrs({
            ...pmNodeAttrs,
            styles: {
              ...pmNodeAttrs?.styles,
              thumbnailPosition: nextPosition
            }
          });
        },
        size: "small"
      }
    )
  ), pmNodeAttrs?.styles?.thumbnailPosition !== "HIDDEN" && !isMobile && /* @__PURE__ */ import_react.default.createElement(
    import_design_system.FormField,
    {
      label: t("LinkPreview_Design_Panel_Image_Position"),
      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("LinkPreview_Design_Panel_Image_Position_Right") : t("LinkPreview_Design_Panel_Image_Position_Left"),
        appendTo: containerEl
      },
      /* @__PURE__ */ import_react.default.createElement(
        import_design_system.Thumbnail,
        {
          size: "tiny",
          selected: ["START", "HIDDEN"].includes(
            pmNodeAttrs?.styles?.thumbnailPosition || "HIDDEN"
          ),
          onClick: () => {
            logBi({ dataHook: import_data_hooks.SETTINGS_LINKPREVIEW_IMAGE_POSITION_LEFT_THUMBNAIL });
            patchPmNodeAttrs({
              ...pmNodeAttrs,
              styles: {
                ...pmNodeAttrs?.styles,
                thumbnailPosition: import_v1.LinkPreviewData_Styles_Position.START
              }
            });
          },
          noPadding: true,
          width: 30,
          height: 30,
          contentAlignment: "center",
          textPosition: "outside",
          image: isRTL ? /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.ObjectPositionRightSmall, { height: "100%" }) : /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.ObjectPositionLeftSmall, { height: "100%" }),
          dataHook: import_data_hooks.SETTINGS_LINKPREVIEW_IMAGE_POSITION_LEFT_THUMBNAIL,
          tooltipProps: { appendTo: containerEl }
        }
      )
    ), /* @__PURE__ */ import_react.default.createElement(
      import_design_system.Tooltip,
      {
        size: "small",
        inline: true,
        content: t("LinkPreview_Design_Panel_Image_Position_Top"),
        appendTo: containerEl
      },
      /* @__PURE__ */ import_react.default.createElement(
        import_design_system.Thumbnail,
        {
          size: "tiny",
          selected: pmNodeAttrs?.styles?.thumbnailPosition === "TOP",
          onClick: () => {
            logBi({ dataHook: import_data_hooks.SETTINGS_LINKPREVIEW_IMAGE_POSITION_TOP_THUMBNAIL });
            patchPmNodeAttrs({
              ...pmNodeAttrs,
              styles: {
                ...pmNodeAttrs?.styles,
                thumbnailPosition: import_v1.LinkPreviewData_Styles_Position.TOP
              }
            });
          },
          noPadding: true,
          width: 30,
          height: 30,
          contentAlignment: "center",
          textPosition: "outside",
          image: /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.ObjectPositionTopSmall, { height: "100%" }),
          dataHook: import_data_hooks.SETTINGS_LINKPREVIEW_IMAGE_POSITION_TOP_THUMBNAIL
        }
      )
    ), /* @__PURE__ */ import_react.default.createElement(
      import_design_system.Tooltip,
      {
        size: "small",
        inline: true,
        content: isRTL ? t("LinkPreview_Design_Panel_Image_Position_Left") : t("LinkPreview_Design_Panel_Image_Position_Right"),
        appendTo: containerEl
      },
      /* @__PURE__ */ import_react.default.createElement(
        import_design_system.Thumbnail,
        {
          size: "tiny",
          selected: pmNodeAttrs?.styles?.thumbnailPosition === "END",
          onClick: () => {
            logBi({ dataHook: import_data_hooks.SETTINGS_LINKPREVIEW_IMAGE_POSITION_RIGHT_THUMBNAIL });
            patchPmNodeAttrs({
              ...pmNodeAttrs,
              styles: {
                ...pmNodeAttrs?.styles,
                thumbnailPosition: import_v1.LinkPreviewData_Styles_Position.END
              }
            });
          },
          noPadding: true,
          width: 30,
          height: 30,
          contentAlignment: "center",
          textPosition: "outside",
          image: isRTL ? /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.ObjectPositionLeftSmall, { height: "100%" }) : /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.ObjectPositionRightSmall, { height: "100%" }),
          dataHook: import_data_hooks.SETTINGS_LINKPREVIEW_IMAGE_POSITION_RIGHT_THUMBNAIL
        }
      )
    ))
  ))), /* @__PURE__ */ import_react.default.createElement(import_design_system.Divider, null), /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "vertical", gap: "SP2", padding: "SP3" }, /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "vertical", 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("LinkPreview_Design_Panel_Text"))), /* @__PURE__ */ import_react.default.createElement(
    import_design_system.FieldSet,
    {
      legend: t("LinkPreview_Design_Panel_Title_Color"),
      legendPlacement: "left",
      columns: "auto 30px",
      alignment: "center"
    },
    /* @__PURE__ */ import_react.default.createElement("div", null),
    /* @__PURE__ */ import_react.default.createElement(
      import_design_system.FillPreview,
      {
        fill: resolveDisplayColor(pmNodeAttrs?.styles?.titleColor) ?? resolveDisplayColor(defaultColors.titleColor),
        onClick: () => {
          logBi({ dataHook: import_data_hooks.SETTINGS_LINKPREVIEW_TITLE_COLOR_PICKER_TRIGGER });
          openColorPicker("titleColor");
        },
        ref: titlePickerToggleRef,
        dataHook: import_data_hooks.SETTINGS_LINKPREVIEW_TITLE_COLOR_PICKER_TRIGGER
      }
    )
  ), /* @__PURE__ */ import_react.default.createElement(
    import_design_system.FieldSet,
    {
      legend: t("LinkPreview_Design_Panel_Subtitle_Color"),
      legendPlacement: "left",
      columns: "auto 30px",
      alignment: "center"
    },
    /* @__PURE__ */ import_react.default.createElement("div", null),
    /* @__PURE__ */ import_react.default.createElement(
      import_design_system.FillPreview,
      {
        fill: resolveDisplayColor(pmNodeAttrs?.styles?.subtitleColor) ?? resolveDisplayColor(defaultColors.subtitleColor),
        onClick: () => {
          logBi({ dataHook: import_data_hooks.SETTINGS_LINKPREVIEW_SUBTITLE_COLOR_PICKER_TRIGGER });
          openColorPicker("subtitleColor");
        },
        ref: subtitlePickerToggleRef,
        dataHook: import_data_hooks.SETTINGS_LINKPREVIEW_SUBTITLE_COLOR_PICKER_TRIGGER
      }
    )
  ), /* @__PURE__ */ import_react.default.createElement(
    import_design_system.FieldSet,
    {
      legend: t("LinkPreview_Design_Panel_Link_Color"),
      legendPlacement: "left",
      columns: "auto 30px",
      alignment: "center"
    },
    /* @__PURE__ */ import_react.default.createElement("div", null),
    /* @__PURE__ */ import_react.default.createElement(
      import_design_system.FillPreview,
      {
        fill: resolveDisplayColor(pmNodeAttrs?.styles?.linkColor) ?? resolveDisplayColor(defaultColors.linkColor),
        onClick: () => {
          logBi({ dataHook: import_data_hooks.SETTINGS_LINKPREVIEW_LINK_COLOR_PICKER_TRIGGER });
          openColorPicker("linkColor");
        },
        ref: linkPickerToggleRef,
        dataHook: import_data_hooks.SETTINGS_LINKPREVIEW_LINK_COLOR_PICKER_TRIGGER
      }
    )
  ))), /* @__PURE__ */ import_react.default.createElement(import_design_system.Divider, null), /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "vertical", gap: "SP2", padding: "SP3" }, /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "vertical", 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("LinkPreview_Design_Panel_Card"))), /* @__PURE__ */ import_react.default.createElement(
    import_ui_components.ColorWithOpacityInput,
    {
      label: t("LinkPreview_Design_Panel_Background_Color"),
      inputDataHook: import_data_hooks.SETTINGS_LINKPREVIEW_BACKGROUND_COLOR_INPUT,
      fillPreviewDataHook: import_data_hooks.SETTINGS_LINKPREVIEW_BACKGROUND_COLOR_TRIGGER,
      fill: {
        type: "color",
        color: pmNodeAttrs?.styles?.backgroundColor ?? defaultColors.backgroundColor,
        onChange: (color) => {
          logBi({ dataHook: import_data_hooks.SETTINGS_LINKPREVIEW_BACKGROUND_COLOR_INPUT, value: color });
          patchPmNodeAttrs({
            styles: {
              ...pmNodeAttrs?.styles,
              backgroundColor: color ?? null
            }
          });
        }
      },
      onColorPress: () => {
        logBi({ dataHook: import_data_hooks.SETTINGS_LINKPREVIEW_BACKGROUND_COLOR_INPUT });
        openColorPicker("backgroundColor");
      },
      colorPickerRef: backgroundPickerToggleRef,
      zIndex
    }
  ), /* @__PURE__ */ import_react.default.createElement(
    import_ui_components.ColorWithOpacityInput,
    {
      label: t("LinkPreview_Design_Panel_Border_Color"),
      inputDataHook: import_data_hooks.SETTINGS_LINKPREVIEW_BORDER_COLOR_INPUT,
      fillPreviewDataHook: import_data_hooks.SETTINGS_LINKPREVIEW_BORDER_COLOR_TRIGGER,
      fill: {
        type: "color",
        color: pmNodeAttrs?.styles?.borderColor ?? defaultColors.borderColor,
        onChange: (color) => {
          logBi({ dataHook: import_data_hooks.SETTINGS_LINKPREVIEW_BORDER_COLOR_INPUT, value: color });
          patchPmNodeAttrs({
            styles: {
              ...pmNodeAttrs?.styles,
              borderColor: color ?? null
            }
          });
        }
      },
      onColorPress: () => {
        logBi({ dataHook: import_data_hooks.SETTINGS_LINKPREVIEW_BORDER_COLOR_INPUT });
        openColorPicker("borderColor");
      },
      colorPickerRef: borderPickerToggleRef,
      zIndex
    }
  ), /* @__PURE__ */ import_react.default.createElement(
    import_number_input_with_label.NumberInputWithLabel,
    {
      label: t("LinkPreview_Design_Panel_Border_Width"),
      dataHook: import_data_hooks.SETTINGS_LINKPREVIEW_BORDER_WIDTH_INPUT,
      suffix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, t("Common_Units_PX")),
      value: pmNodeAttrs?.styles?.borderWidth ?? 1,
      min: 0,
      max: 15,
      onChange: (width) => patchPmNodeAttrs({ styles: { ...pmNodeAttrs?.styles, borderWidth: width } }),
      logBi,
      zIndex
    }
  ), /* @__PURE__ */ import_react.default.createElement(
    import_number_input_with_label.NumberInputWithLabel,
    {
      label: t("LinkPreview_Design_Panel_Corner_Radius"),
      dataHook: import_data_hooks.SETTINGS_LINKPREVIEW_CORNER_RADIUS_INPUT,
      suffix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, t("Common_Units_PX")),
      value: pmNodeAttrs?.styles?.borderRadius ?? 0,
      min: 0,
      max: 30,
      onChange: (radius) => patchPmNodeAttrs({ styles: { ...pmNodeAttrs?.styles, borderRadius: radius } }),
      logBi,
      zIndex
    }
  ))));
};
//# sourceMappingURL=design-tab.js.map
