"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 button_viewer_exports = {};
__export(button_viewer_exports, {
  ButtonViewer: () => ButtonViewer
});
module.exports = __toCommonJS(button_viewer_exports);
var import_classnames = __toESM(require("classnames"));
var import_react = __toESM(require("react"));
var import_ricos_context = require("./../../ricos-context/index.js");
var import_v1 = require("./../../ricos-schema/legacy/wix/rich_content/v1/index.js");
var import_get_link_href_url = require("./../../_shared/link/get-link-href-url.js");
var import_resolve_css_color = require("./../../_shared/resolve-css-color.js");
var import_schema_gradient_to_css = require("./../../_shared/schema-gradient-to-css.js");
var import_wix_rich_content_common = require("./../../wix-rich-content-common/index.js");
var import_data_hooks = require("../data-hooks.js");
var import_default_styles_scss = __toESM(require("../statics/styles/default-styles-scss.js"));
var import_types = require("../types.js");
const ButtonViewer = ({
  onClick,
  className,
  helpers,
  settings = {},
  buttonData,
  nodeId,
  baseUrl
}) => {
  const { tabIndex, theme } = (0, import_react.useContext)(import_ricos_context.RicosContext);
  const isActionButton = buttonData.type === import_v1.ButtonData_Type.ACTION;
  const onClickHandler = (0, import_react.useCallback)(() => {
    helpers?.onViewerAction?.(
      isActionButton ? import_types.ACTION_BUTTON_TYPE : import_types.LINK_BUTTON_TYPE,
      "Click",
      "",
      nodeId,
      {
        type: import_v1.Node_Type.BUTTON,
        buttonData
      }
    );
    onClick?.();
  }, [helpers?.onViewerAction]);
  const ButtonComponent = settings.customComponent ? settings.customComponent : isActionButton ? ActionButton : LinkButton;
  const btnStyles = buttonData?.styles;
  const borderWidth = btnStyles?.borderWidth ?? btnStyles?.border?.width ?? 0;
  const borderRadius = btnStyles?.borderRadius ?? btnStyles?.border?.radius;
  const normalBorderColor = btnStyles?.borderColor ?? btnStyles?.colors?.border ?? settings.colors?.color8 ?? "";
  const hoverBorderColor = btnStyles?.borderColorHover ?? (theme?.customStyles?.button?.borderColorHover ? void 0 : normalBorderColor);
  const normalTextColor = btnStyles?.textColor ?? btnStyles?.colors?.text ?? settings.colors?.color1;
  const hoverTextColor = btnStyles?.textColorHover ?? (theme?.customStyles?.button?.colorHover ? void 0 : normalTextColor);
  const background = btnStyles?.background;
  const backgroundHover = btnStyles?.backgroundHover;
  const normalBackgroundColor = (background?.type === "COLOR" ? background.color : void 0) ?? btnStyles?.backgroundColor ?? btnStyles?.colors?.background ?? settings.colors?.color8;
  const hoverBackgroundColor = (backgroundHover?.type === "COLOR" ? backgroundHover.color : void 0) ?? btnStyles?.backgroundColorHover ?? (theme?.customStyles?.button?.backgroundColorHover ? void 0 : normalBackgroundColor);
  const customWidth = buttonData.containerData?.width?.custom;
  const isSmallButton = btnStyles?.buttonSize ? btnStyles?.buttonSize === "SMALL" : theme?.customStyles?.button?.buttonSize === "small";
  const isLargeButton = btnStyles?.buttonSize ? btnStyles?.buttonSize === "LARGE" : theme?.customStyles?.button?.buttonSize === "large";
  const fontSize = isSmallButton ? 12 : isLargeButton ? 16 : void 0;
  const padding = isSmallButton ? "6px 9px" : isLargeButton ? "15px 24px" : void 0;
  const normalBackground = background?.type === "GRADIENT" ? (0, import_schema_gradient_to_css.schemaGradientToCss)(background.gradient) : normalBackgroundColor;
  const hoverBackground = backgroundHover?.type === "GRADIENT" ? (0, import_schema_gradient_to_css.schemaGradientToCss)(backgroundHover.gradient) : (0, import_resolve_css_color.resolveCssColor)(hoverBackgroundColor);
  const style = {
    "--ricos-internal-button-color": (0, import_resolve_css_color.resolveCssColor)(normalTextColor),
    ...hoverTextColor ? { "--ricos-internal-button-color-hover": (0, import_resolve_css_color.resolveCssColor)(hoverTextColor) } : {},
    "--ricos-internal-button-background": background?.type === "GRADIENT" ? normalBackground : (0, import_resolve_css_color.resolveCssColor)(normalBackgroundColor),
    ...hoverBackground ? { "--ricos-internal-button-background-hover": hoverBackground } : {},
    ...normalBorderColor ? { "--ricos-internal-button-border-color": (0, import_resolve_css_color.resolveCssColor)(normalBorderColor) } : {},
    ...hoverBorderColor ? { "--ricos-internal-button-border-color-hover": (0, import_resolve_css_color.resolveCssColor)(hoverBorderColor) } : {},
    "--ricos-internal-button-border-radius": borderRadius ? `${borderRadius}px` : void 0,
    "--ricos-internal-button-border-width": borderWidth ? `${borderWidth}px` : void 0,
    "--ricos-internal-button-custom-width": customWidth ? `${customWidth}px` : void 0,
    "--ricos-internal-button-font-size": fontSize ? `${fontSize}px` : void 0,
    "--ricos-internal-button-padding": padding,
    printColorAdjust: "exact"
  };
  return /* @__PURE__ */ import_react.default.createElement(
    ButtonComponent,
    {
      className: (0, import_classnames.default)(import_default_styles_scss.default.button_container, className),
      style,
      "data-hook": `${import_data_hooks.ROOT} ${import_data_hooks.ROOT}-${nodeId}`,
      onClick: onClickHandler,
      tabIndex,
      buttonData,
      ...!isActionButton && {
        href: buttonData.link ? (0, import_get_link_href_url.getLinkHrefUrl)(buttonData.link, baseUrl) : void 0,
        target: buttonData.link?.target && `_${buttonData.link.target.toLowerCase()}`,
        rel: buttonData.link?.rel?.nofollow ? (0, import_wix_rich_content_common.getRelValue)("nofollow") : void 0
      }
    }
  );
};
const LinkButton = (props) => {
  const { buttonData, ...rest } = props;
  return /* @__PURE__ */ import_react.default.createElement(
    "a",
    {
      ...rest,
      onKeyDown: (e) => {
        if (e.key === "Enter") {
          props.onClick?.();
        }
      }
    },
    /* @__PURE__ */ import_react.default.createElement("div", { className: import_default_styles_scss.default.button_text }, buttonData.text)
  );
};
const ActionButton = (props) => {
  const { buttonData, ...rest } = props;
  return /* @__PURE__ */ import_react.default.createElement(
    "button",
    {
      ...rest,
      type: "button",
      onKeyDown: (e) => {
        if (e.key === " " || e.key === "Enter") {
          props.onClick?.();
        }
      }
    },
    /* @__PURE__ */ import_react.default.createElement("div", { className: import_default_styles_scss.default.button_text }, buttonData.text)
  );
};
//# sourceMappingURL=button-viewer.js.map
