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);

// src/components/walletCard/Guide/index.tsx
var Guide_exports = {};
__export(Guide_exports, {
  default: () => Guide_default
});
module.exports = __toCommonJS(Guide_exports);
var import_react = __toESM(require("react"));
var import_useEngineContext = __toESM(require("../../../hooks/useEngineContext"));
var import_button = __toESM(require("../../button"));
var import_index = require("./index.less");
var Guide = (props) => {
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
  const { setting } = props;
  const context = (0, import_useEngineContext.default)();
  const { utils } = context.appHelper || {};
  const getTextStyle = (config, otherConfig) => ({
    color: (config == null ? void 0 : config.color) || (otherConfig == null ? void 0 : otherConfig.color) || "#fff",
    fontSize: (config == null ? void 0 : config.size) || (otherConfig == null ? void 0 : otherConfig.size) || 14,
    fontWeight: (config == null ? void 0 : config.weight) || (otherConfig == null ? void 0 : otherConfig.weight) || 400,
    fontStyle: (config == null ? void 0 : config.style) || "normal"
  });
  const _setting = (0, import_react.useMemo)(() => {
    return (setting == null ? void 0 : setting.walletGuideConfig) || {};
  }, [setting == null ? void 0 : setting.walletGuideConfig]);
  const handleClick = (e) => {
    var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
    e.stopPropagation();
    if (!((_a2 = _setting == null ? void 0 : _setting.skipLink) == null ? void 0 : _a2.page)) return;
    if ((_d2 = (_c2 = (_b2 = utils == null ? void 0 : utils.interaction) == null ? void 0 : _b2.utils) == null ? void 0 : _c2.isAppEnv) == null ? void 0 : _d2.call(_c2)) {
      (_g2 = (_f2 = (_e2 = utils == null ? void 0 : utils.interaction) == null ? void 0 : _e2.utils) == null ? void 0 : _f2.postMessageToApp) == null ? void 0 : _g2.call(_f2, {
        module: "global",
        key: "openNative",
        data: {
          link: _setting == null ? void 0 : _setting.skipLink
        }
      });
      return;
    }
    utils == null ? void 0 : utils.jumpPageByLink(_setting == null ? void 0 : _setting.skipLink);
  };
  return /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      className: "pisell-wallet-guide-wrap",
      style: {
        backgroundColor: _setting == null ? void 0 : _setting.backgroundColor
      },
      onClick: (e) => handleClick(e)
    },
    ((_a = utils == null ? void 0 : utils.translation) == null ? void 0 : _a.call(utils, _setting == null ? void 0 : _setting.backgroundImage)) ? /* @__PURE__ */ import_react.default.createElement(
      "img",
      {
        className: "pisell-wallet-guide-bg",
        src: ((_b = utils == null ? void 0 : utils.translation) == null ? void 0 : _b.call(utils, _setting.backgroundImage)) || "",
        alt: ((_c = utils == null ? void 0 : utils.translation) == null ? void 0 : _c.call(utils, _setting == null ? void 0 : _setting.backgroundImageAlt)) || "",
        title: ((_d = utils == null ? void 0 : utils.translation) == null ? void 0 : _d.call(utils, _setting == null ? void 0 : _setting.backgroundImageAlt)) || ""
      }
    ) : null,
    /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        className: `pisell-wallet-guide-content ${_setting.align === "center" ? "pisell-wallet-guide-center" : ""}`
      },
      /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
        "div",
        {
          className: "pisell-wallet-guide-title",
          style: getTextStyle(_setting == null ? void 0 : _setting.titleConfig, {
            size: 18,
            weight: 600
          })
        },
        ((_f = utils == null ? void 0 : utils.translation) == null ? void 0 : _f.call(
          utils,
          (_setting == null ? void 0 : _setting.title) || ((_e = _setting == null ? void 0 : _setting.titleConfig) == null ? void 0 : _e.text)
        )) || ""
      ), /* @__PURE__ */ import_react.default.createElement(
        "div",
        {
          className: "pisell-wallet-guide-subtitle",
          style: getTextStyle(_setting == null ? void 0 : _setting.subtitleConfig, {
            color: "#D0D5DD"
          })
        },
        ((_h = utils == null ? void 0 : utils.translation) == null ? void 0 : _h.call(
          utils,
          (_setting == null ? void 0 : _setting.subtitle) || ((_g = _setting == null ? void 0 : _setting.subtitleConfig) == null ? void 0 : _g.text)
        )) || ""
      )),
      ((_j = utils == null ? void 0 : utils.translation) == null ? void 0 : _j.call(
        utils,
        (_setting == null ? void 0 : _setting.buttonText) || ((_i = _setting == null ? void 0 : _setting.buttonConfig) == null ? void 0 : _i.text)
      )) ? /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-guide-button-wrap" }, /* @__PURE__ */ import_react.default.createElement(
        import_button.default,
        {
          style: {
            backgroundColor: (_setting == null ? void 0 : _setting.buttonColor) || "#7F56D9",
            borderColor: (_setting == null ? void 0 : _setting.buttonBorderColor) || "#7F56D9"
          },
          onClick: (e) => handleClick(e)
        },
        /* @__PURE__ */ import_react.default.createElement(
          "div",
          {
            style: getTextStyle(_setting == null ? void 0 : _setting.buttonConfig, {
              weight: 600
            })
          },
          ((_l = utils == null ? void 0 : utils.translation) == null ? void 0 : _l.call(
            utils,
            (_setting == null ? void 0 : _setting.buttonText) || ((_k = _setting == null ? void 0 : _setting.buttonConfig) == null ? void 0 : _k.text)
          )) || ""
        )
      )) : null
    )
  );
};
var Guide_default = Guide;
