import classNames from "classnames";
import React, { useCallback, useContext } from "react";
import { RicosContext } from "./../../ricos-context/index.js";
import { ButtonData_Type, Node_Type } from "./../../ricos-schema/legacy/wix/rich_content/v1/index.js";
import { getLinkHrefUrl } from "./../../_shared/link/get-link-href-url.js";
import { resolveCssColor } from "./../../_shared/resolve-css-color.js";
import { schemaGradientToCss } from "./../../_shared/schema-gradient-to-css.js";
import { getRelValue } from "./../../wix-rich-content-common/index.js";
import { ROOT } from "../data-hooks.js";
import styles from "../statics/styles/default-styles-scss.js";
import { ACTION_BUTTON_TYPE, LINK_BUTTON_TYPE } from "../types.js";
const ButtonViewer = ({
  onClick,
  className,
  helpers,
  settings = {},
  buttonData,
  nodeId,
  baseUrl
}) => {
  const { tabIndex, theme } = useContext(RicosContext);
  const isActionButton = buttonData.type === ButtonData_Type.ACTION;
  const onClickHandler = useCallback(() => {
    helpers?.onViewerAction?.(
      isActionButton ? ACTION_BUTTON_TYPE : LINK_BUTTON_TYPE,
      "Click",
      "",
      nodeId,
      {
        type: 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" ? schemaGradientToCss(background.gradient) : normalBackgroundColor;
  const hoverBackground = backgroundHover?.type === "GRADIENT" ? schemaGradientToCss(backgroundHover.gradient) : resolveCssColor(hoverBackgroundColor);
  const style = {
    "--ricos-internal-button-color": resolveCssColor(normalTextColor),
    ...hoverTextColor ? { "--ricos-internal-button-color-hover": resolveCssColor(hoverTextColor) } : {},
    "--ricos-internal-button-background": background?.type === "GRADIENT" ? normalBackground : resolveCssColor(normalBackgroundColor),
    ...hoverBackground ? { "--ricos-internal-button-background-hover": hoverBackground } : {},
    ...normalBorderColor ? { "--ricos-internal-button-border-color": resolveCssColor(normalBorderColor) } : {},
    ...hoverBorderColor ? { "--ricos-internal-button-border-color-hover": 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__ */ React.createElement(
    ButtonComponent,
    {
      className: classNames(styles.button_container, className),
      style,
      "data-hook": `${ROOT} ${ROOT}-${nodeId}`,
      onClick: onClickHandler,
      tabIndex,
      buttonData,
      ...!isActionButton && {
        href: buttonData.link ? getLinkHrefUrl(buttonData.link, baseUrl) : void 0,
        target: buttonData.link?.target && `_${buttonData.link.target.toLowerCase()}`,
        rel: buttonData.link?.rel?.nofollow ? getRelValue("nofollow") : void 0
      }
    }
  );
};
const LinkButton = (props) => {
  const { buttonData, ...rest } = props;
  return /* @__PURE__ */ React.createElement(
    "a",
    {
      ...rest,
      onKeyDown: (e) => {
        if (e.key === "Enter") {
          props.onClick?.();
        }
      }
    },
    /* @__PURE__ */ React.createElement("div", { className: styles.button_text }, buttonData.text)
  );
};
const ActionButton = (props) => {
  const { buttonData, ...rest } = props;
  return /* @__PURE__ */ React.createElement(
    "button",
    {
      ...rest,
      type: "button",
      onKeyDown: (e) => {
        if (e.key === " " || e.key === "Enter") {
          props.onClick?.();
        }
      }
    },
    /* @__PURE__ */ React.createElement("div", { className: styles.button_text }, buttonData.text)
  );
};
export {
  ButtonViewer
};
//# sourceMappingURL=button-viewer.js.map
