"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_component_exports = {};
__export(design_component_exports, {
  DesignComponent: () => DesignComponent
});
module.exports = __toCommonJS(design_component_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_ricos_context = require("./../../ricos-context/index.js");
var import_ricos_document = require("./../../ricos-schema/next-schema/generated/ricos_document.js");
var import_ricos_styles = require("./../../ricos-styles/index.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_use_node_attrs = require("./../../_shared/use-node-attrs.js");
var import_button_color_picker = require("./../components/button-color-picker.js");
var import_constants = require("./../constants.js");
var import_data_hooks = require("./../../ui-components/color-picker/button-color-swatches/data-hooks.js");
var import_ui_components = require("./../../ui-components/index.js");
var import_data_hooks2 = require("../data-hooks.js");
const defaultBorderRadius = 0;
const defaultBorderWidth = 0;
const BUTTON_NORMAL_STATE_TOGGLE_VALUE = "NORMAL";
const BUTTON_HOVER_STATE_TOGGLE_VALUE = "HOVER";
const themeButtonSizeMap = {
  small: import_ricos_document.ButtonData_Styles_ButtonSize.SMALL,
  medium: import_ricos_document.ButtonData_Styles_ButtonSize.MEDIUM,
  large: import_ricos_document.ButtonData_Styles_ButtonSize.LARGE
};
const DesignComponent = ({
  config,
  onChange,
  defaultBackgroundColor,
  defaultTextColor,
  nodeId,
  nodeType,
  logBi
}) => {
  const { t, isMobile, environment, theme } = (0, import_react.useContext)(import_ricos_context.RicosContext);
  const modalService = (0, import_react.useContext)(import_ricos_context.ModalServiceContext);
  const { adapter } = (0, import_react.useContext)(import_ricos_context.EditorContext);
  const { pmNodeAttrs } = (0, import_use_node_attrs.useNodeAttrs)(nodeId, nodeType);
  const containerEl = (0, import_ui_components.usePanelContainerElement)();
  const forceUpdate = (0, import_react.useReducer)((x) => x + 1, 0)[1];
  const zIndexService = (0, import_react.useContext)(import_ricos_context.ZIndexContext);
  const zIndex = zIndexService.getZIndex("DIALOG");
  const backgroundPickerToggleRef = (0, import_react.useRef)(null);
  const textPickerToggleRef = (0, import_react.useRef)(null);
  const borderPickerToggleRef = (0, import_react.useRef)(null);
  const [buttonStateToggleValue, setButtonStateToggleValue] = (0, import_react.useState)("NORMAL");
  const isHoverState = buttonStateToggleValue === BUTTON_HOVER_STATE_TOGGLE_VALUE;
  const button = nodeId ? adapter.tiptapEditor.view.dom.querySelector(`[data-hook~=button-viewer-${nodeId}`) : void 0;
  const buttonStyle = button ? window.getComputedStyle(button) : void 0;
  const styles = pmNodeAttrs?.styles;
  const textColor = styles?.textColor ?? toHexFormatSafe(buttonStyle?.getPropertyValue("color")) ?? defaultTextColor;
  const borderColor = styles?.borderColor ?? toHexFormatSafe(buttonStyle?.getPropertyValue("border-color"));
  const backgroundColor = (styles?.background?.type === "COLOR" ? styles.background.color : void 0) ?? styles?.backgroundColor ?? defaultBackgroundColor ?? toHexFormatSafe(buttonStyle?.getPropertyValue("background-color"));
  const borderWidth = styles?.borderWidth ?? parseToInt(buttonStyle?.getPropertyValue("border-width")) ?? defaultBorderWidth;
  const borderRadius = styles?.borderRadius ?? parseToInt(buttonStyle?.getPropertyValue("border-radius")) ?? defaultBorderRadius;
  const buttonSize = styles?.buttonSize ?? themeButtonSizeMap[theme?.customStyles?.button?.buttonSize] ?? import_ricos_document.ButtonData_Styles_ButtonSize.MEDIUM;
  const textColorHover = styles?.textColorHover ?? toHexFormatSafe(buttonStyle?.getPropertyValue("color")) ?? textColor;
  const borderColorHover = styles?.borderColorHover ?? toHexFormatSafe(buttonStyle?.getPropertyValue("border-color")) ?? borderColor;
  const backgroundColorHover = (styles?.backgroundHover?.type === "COLOR" ? styles.backgroundHover.color : void 0) ?? styles?.backgroundColorHover ?? toHexFormatSafe(buttonStyle?.getPropertyValue("background-color")) ?? backgroundColor;
  const backgroundGradient = styles?.background?.type === "GRADIENT" ? (0, import_schema_gradient_to_css.schemaGradientToCss)(styles.background.gradient, theme.colorPalette) : void 0;
  const backgroundGradientHover = styles?.backgroundHover?.type === "GRADIENT" ? (0, import_schema_gradient_to_css.schemaGradientToCss)(styles.backgroundHover.gradient, theme.colorPalette) : void 0;
  const setHoverPreview = (applyPreview) => {
    adapter.tiptapEditor.chain().setHoverPreview(applyPreview).run();
    forceUpdate();
  };
  (0, import_react.useEffect)(() => {
    setHoverPreview(isHoverState);
    return () => setHoverPreview(false);
  }, [isHoverState]);
  const handleOnChange = (newData) => {
    const newStyles = {
      ...styles,
      ...newData
    };
    onChange({
      styles: {
        ...newStyles,
        borderRadius: newStyles?.borderRadius === defaultBorderRadius ? void 0 : newStyles?.borderRadius,
        borderWidth: newStyles?.borderWidth === defaultBorderWidth ? void 0 : newStyles?.borderWidth
      }
    });
  };
  const showLiveSiteHint = environment !== "liveSite" && environment !== "wixel";
  const getDefaultColor = (colorType) => {
    if (colorType === "backgroundColor") {
      return isHoverState ? backgroundColorHover : backgroundColor;
    }
    if (colorType === "textColor") {
      return isHoverState ? textColorHover : textColor;
    }
    return isHoverState ? borderColorHover : borderColor;
  };
  const openColorPicker = (colorType) => {
    const referenceElement = getPickerToggleRef(colorType) ?? void 0;
    const modalId = import_constants.buttonsModals.colorPicker;
    modalService.togglePluginPanel({
      id: modalId,
      Component: import_button_color_picker.ButtonColorPicker,
      componentProps: {
        modalId,
        nodeId,
        nodeType,
        colorType,
        isHoverState,
        referenceElement,
        config,
        defaultColor: getDefaultColor(colorType),
        onValueSelected: onValueChange(colorType),
        onColorAdded: getLegacyOnColorAdded(colorType)
      },
      isMobile,
      positioning: {
        referenceElement,
        placement: "left"
      },
      type: void 0,
      onClickOutside: {
        on: "pointerup",
        handler: import_lodash.default.noop
      },
      focusReturnElement: referenceElement ?? void 0
    });
  };
  const onValueChange = (colorType) => (value) => {
    const hoverSuffix = isHoverState ? "Hover" : "";
    if (colorType === "backgroundColor") {
      const background = value ? value.gradient ? { type: "GRADIENT", gradient: value.gradient } : value.color ? { type: "COLOR", color: value.color } : void 0 : void 0;
      handleOnChange({
        [`background${hoverSuffix}`]: background
      });
    } else {
      handleOnChange({ [`${colorType}${hoverSuffix}`]: value?.color });
    }
  };
  const onColorChange = (colorType) => (color) => onValueChange(colorType)(color ? { color } : void 0);
  const getLegacyOnColorAdded = (colorType) => {
    if (colorType === "backgroundColor") {
      return config.onBackgroundColorAdded;
    } else if (colorType === "textColor") {
      return config.onTextColorAdded;
    } else {
      return config.onBorderColorAdded;
    }
  };
  const getPickerToggleRef = (colorType) => {
    if (colorType === "backgroundColor") {
      return backgroundPickerToggleRef.current;
    } else if (colorType === "textColor") {
      return textPickerToggleRef.current;
    } else {
      return borderPickerToggleRef.current;
    }
  };
  return /* @__PURE__ */ import_react.default.createElement(
    import_design_system.Box,
    {
      direction: "vertical",
      width: "100%",
      padding: "SP4",
      paddingTop: "SP3",
      paddingBottom: "SP3",
      gap: "SP2"
    },
    /* @__PURE__ */ import_react.default.createElement(import_design_system.FormField, { inputWidth: "100%" }, /* @__PURE__ */ import_react.default.createElement(
      import_design_system.SegmentedToggle,
      {
        defaultSelected: buttonStateToggleValue,
        size: "small",
        onClick: (_, value) => setButtonStateToggleValue(value)
      },
      /* @__PURE__ */ import_react.default.createElement(import_design_system.SegmentedToggle.Button, { value: BUTTON_NORMAL_STATE_TOGGLE_VALUE }, t("ButtonModal_Design_Normal_State_Toggle")),
      /* @__PURE__ */ import_react.default.createElement(import_design_system.SegmentedToggle.Button, { value: BUTTON_HOVER_STATE_TOGGLE_VALUE }, t("ButtonModal_Design_Hover_State_Toggle"))
    )),
    isHoverState ? null : /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { paddingTop: "SP1" }, /* @__PURE__ */ import_react.default.createElement(
      import_design_system.FormField,
      {
        label: t("ButtonModal_Button_Size"),
        labelSize: "small",
        labelPlacement: "left",
        labelWidth: "1fr",
        labelAlignment: "middle"
      },
      /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "horizontal", gap: "6px" }, /* @__PURE__ */ import_react.default.createElement(
        SizeOption,
        {
          selected: buttonSize === import_ricos_document.ButtonData_Styles_ButtonSize.SMALL,
          icon: /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.ButtonRoundedSmall, { size: 12 }),
          onClick: () => handleOnChange({ buttonSize: import_ricos_document.ButtonData_Styles_ButtonSize.SMALL })
        }
      ), /* @__PURE__ */ import_react.default.createElement(
        SizeOption,
        {
          selected: buttonSize === import_ricos_document.ButtonData_Styles_ButtonSize.MEDIUM,
          icon: /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.ButtonRoundedSmall, { size: 18 }),
          onClick: () => handleOnChange({ buttonSize: import_ricos_document.ButtonData_Styles_ButtonSize.MEDIUM })
        }
      ), /* @__PURE__ */ import_react.default.createElement(
        SizeOption,
        {
          selected: buttonSize === import_ricos_document.ButtonData_Styles_ButtonSize.LARGE,
          icon: /* @__PURE__ */ import_react.default.createElement(import_wix_ui_icons_common.ButtonRoundedSmall, { size: 24 }),
          onClick: () => handleOnChange({ buttonSize: import_ricos_document.ButtonData_Styles_ButtonSize.LARGE })
        }
      ))
    )),
    /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { direction: "vertical", gap: "SP3" }, /* @__PURE__ */ import_react.default.createElement(
      import_ui_components.ColorWithOpacityInput,
      {
        label: t("ButtonModal_Background_Color"),
        fill: (() => {
          const gradient = isHoverState ? backgroundGradientHover : backgroundGradient;
          return gradient ? { type: "gradient", gradient } : {
            type: "color",
            color: isHoverState ? backgroundColorHover : backgroundColor,
            onChange: onColorChange("backgroundColor")
          };
        })(),
        onColorPress: () => openColorPicker("backgroundColor"),
        colorPickerRef: backgroundPickerToggleRef,
        inputDataHook: import_data_hooks2.DESIGN_SETTINGS_BACKGROUND_COLOR_INPUT,
        zIndex
      }
    ), showLiveSiteHint && /* @__PURE__ */ import_react.default.createElement(import_ui_components.ColorPickerLiveSiteColorHint, null)),
    /* @__PURE__ */ import_react.default.createElement(
      import_design_system.FieldSet,
      {
        legend: t("ButtonModal_Text_Color"),
        legendPlacement: "left",
        columns: "auto 30px",
        alignment: "center",
        dataHook: import_data_hooks2.DESIGN_SETTINGS_TEXT_COLOR_INPUT
      },
      /* @__PURE__ */ import_react.default.createElement("div", null),
      /* @__PURE__ */ import_react.default.createElement(
        import_design_system.FillPreview,
        {
          fill: (0, import_resolve_color_to_display_hex.resolveColorToDisplayHex)(isHoverState ? textColorHover : textColor, containerEl),
          onClick: () => openColorPicker("textColor"),
          ref: textPickerToggleRef,
          dataHook: import_data_hooks.SWATCH_TOGGLE
        }
      )
    ),
    /* @__PURE__ */ import_react.default.createElement(
      import_ui_components.ColorWithOpacityInput,
      {
        label: t("ButtonModal_Border_Color"),
        fill: {
          type: "color",
          color: isHoverState ? borderColorHover : borderColor,
          onChange: onColorChange("borderColor")
        },
        onColorPress: () => openColorPicker("borderColor"),
        colorPickerRef: borderPickerToggleRef,
        inputDataHook: import_data_hooks2.DESIGN_SETTINGS_BORDER_COLOR_INPUT,
        zIndex
      }
    ),
    isHoverState ? null : /* @__PURE__ */ import_react.default.createElement(
      import_ui_components.NumberInputWithLabel,
      {
        label: t("ButtonModal_Width_Input"),
        dataHook: import_data_hooks2.DESIGN_SETTINGS_BORDER_WIDTH_INPUT,
        suffix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, t("Common_Units_PX")),
        value: borderWidth,
        min: 0,
        max: 15,
        onChange: (width) => handleOnChange({ borderWidth: width }),
        logBi,
        zIndex
      }
    ),
    isHoverState ? null : /* @__PURE__ */ import_react.default.createElement(
      import_ui_components.NumberInputWithLabel,
      {
        label: t("ButtonModal_Radius_Input"),
        dataHook: import_data_hooks2.DESIGN_SETTINGS_CORNER_RADIUS_INPUT,
        suffix: /* @__PURE__ */ import_react.default.createElement(import_design_system.Input.Affix, null, t("Common_Units_PX")),
        value: borderRadius,
        min: 0,
        max: 30,
        onChange: (radius) => handleOnChange({ borderRadius: radius }),
        logBi,
        zIndex
      }
    )
  );
};
const SizeOption = ({
  icon,
  selected,
  onClick
}) => {
  return /* @__PURE__ */ import_react.default.createElement(
    import_design_system.Thumbnail,
    {
      height: 30,
      width: 30,
      size: "tiny",
      onClick,
      selected,
      noPadding: true,
      contentAlignment: "center"
    },
    /* @__PURE__ */ import_react.default.createElement(import_design_system.Box, { align: "center" }, icon)
  );
};
const toHexFormatSafe = (color) => {
  return color ? (0, import_ricos_styles.toHexFormat)(color) : void 0;
};
const parseToInt = (value) => {
  if (value === void 0) {
    return void 0;
  }
  const parsedValue = parseInt(value);
  return isNaN(parsedValue) ? void 0 : parsedValue;
};
//# sourceMappingURL=design-component.js.map
