import React, { useMemo } from 'react';
import useEngineContext from "../../../hooks/useEngineContext";
import Button from "../../button";
import "./index.less";
var Guide = function Guide(props) {
  var _utils$translation, _utils$translation2, _utils$translation3, _utils$translation4, _utils$translation5, _setting$titleConfig, _utils$translation6, _setting$subtitleConf, _utils$translation7, _setting$buttonConfig, _utils$translation8, _setting$buttonConfig2;
  var setting = props.setting;
  var context = useEngineContext();
  var _ref = context.appHelper || {},
    utils = _ref.utils;

  /**
   * @title: 样式处理
   * @description:
   * @param {any} config
   * @return {*}
   * @Author: WangHan
   * @Date: 2025-03-13 15:39
   */
  var getTextStyle = function getTextStyle(config, otherConfig) {
    return {
      color: (config === null || config === void 0 ? void 0 : config.color) || (otherConfig === null || otherConfig === void 0 ? void 0 : otherConfig.color) || '#fff',
      fontSize: (config === null || config === void 0 ? void 0 : config.size) || (otherConfig === null || otherConfig === void 0 ? void 0 : otherConfig.size) || 14,
      fontWeight: (config === null || config === void 0 ? void 0 : config.weight) || (otherConfig === null || otherConfig === void 0 ? void 0 : otherConfig.weight) || 400,
      fontStyle: (config === null || config === void 0 ? void 0 : config.style) || 'normal'
    };
  };
  var _setting = useMemo(function () {
    return (setting === null || setting === void 0 ? void 0 : setting.walletGuideConfig) || {};
  }, [setting === null || setting === void 0 ? void 0 : setting.walletGuideConfig]);

  /**
   * @title: 跳转链接
   * @description:
   * @return {*}
   * @Author: WangHan
   * @Date: 2025-06-09 14:36
   */
  var handleClick = function handleClick(e) {
    var _setting$skipLink, _utils$interaction, _utils$interaction$is;
    e.stopPropagation();
    if (!(_setting !== null && _setting !== void 0 && (_setting$skipLink = _setting.skipLink) !== null && _setting$skipLink !== void 0 && _setting$skipLink.page)) return;
    if (utils !== null && utils !== void 0 && (_utils$interaction = utils.interaction) !== null && _utils$interaction !== void 0 && (_utils$interaction = _utils$interaction.utils) !== null && _utils$interaction !== void 0 && (_utils$interaction$is = _utils$interaction.isAppEnv) !== null && _utils$interaction$is !== void 0 && _utils$interaction$is.call(_utils$interaction)) {
      var _utils$interaction2, _utils$interaction2$p;
      utils === null || utils === void 0 || (_utils$interaction2 = utils.interaction) === null || _utils$interaction2 === void 0 || (_utils$interaction2 = _utils$interaction2.utils) === null || _utils$interaction2 === void 0 || (_utils$interaction2$p = _utils$interaction2.postMessageToApp) === null || _utils$interaction2$p === void 0 || _utils$interaction2$p.call(_utils$interaction2, {
        module: 'global',
        key: 'openNative',
        data: {
          link: _setting === null || _setting === void 0 ? void 0 : _setting.skipLink
        }
      });
      return;
    }
    utils === null || utils === void 0 || utils.jumpPageByLink(_setting === null || _setting === void 0 ? void 0 : _setting.skipLink);
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "pisell-wallet-guide-wrap",
    style: {
      backgroundColor: _setting === null || _setting === void 0 ? void 0 : _setting.backgroundColor
    },
    onClick: function onClick(e) {
      return handleClick(e);
    }
  }, utils !== null && utils !== void 0 && (_utils$translation = utils.translation) !== null && _utils$translation !== void 0 && _utils$translation.call(utils, _setting === null || _setting === void 0 ? void 0 : _setting.backgroundImage) ? /*#__PURE__*/React.createElement("img", {
    className: "pisell-wallet-guide-bg",
    src: (utils === null || utils === void 0 || (_utils$translation2 = utils.translation) === null || _utils$translation2 === void 0 ? void 0 : _utils$translation2.call(utils, _setting.backgroundImage)) || '',
    alt: (utils === null || utils === void 0 || (_utils$translation3 = utils.translation) === null || _utils$translation3 === void 0 ? void 0 : _utils$translation3.call(utils, _setting === null || _setting === void 0 ? void 0 : _setting.backgroundImageAlt)) || '',
    title: (utils === null || utils === void 0 || (_utils$translation4 = utils.translation) === null || _utils$translation4 === void 0 ? void 0 : _utils$translation4.call(utils, _setting === null || _setting === void 0 ? void 0 : _setting.backgroundImageAlt)) || ''
  }) : null, /*#__PURE__*/React.createElement("div", {
    className: "pisell-wallet-guide-content ".concat(_setting.align === 'center' ? 'pisell-wallet-guide-center' : '')
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: "pisell-wallet-guide-title",
    style: getTextStyle(_setting === null || _setting === void 0 ? void 0 : _setting.titleConfig, {
      size: 18,
      weight: 600
    })
  }, (utils === null || utils === void 0 || (_utils$translation5 = utils.translation) === null || _utils$translation5 === void 0 ? void 0 : _utils$translation5.call(utils, (_setting === null || _setting === void 0 ? void 0 : _setting.title) || (_setting === null || _setting === void 0 || (_setting$titleConfig = _setting.titleConfig) === null || _setting$titleConfig === void 0 ? void 0 : _setting$titleConfig.text))) || ''), /*#__PURE__*/React.createElement("div", {
    className: "pisell-wallet-guide-subtitle",
    style: getTextStyle(_setting === null || _setting === void 0 ? void 0 : _setting.subtitleConfig, {
      color: '#D0D5DD'
    })
  }, (utils === null || utils === void 0 || (_utils$translation6 = utils.translation) === null || _utils$translation6 === void 0 ? void 0 : _utils$translation6.call(utils, (_setting === null || _setting === void 0 ? void 0 : _setting.subtitle) || (_setting === null || _setting === void 0 || (_setting$subtitleConf = _setting.subtitleConfig) === null || _setting$subtitleConf === void 0 ? void 0 : _setting$subtitleConf.text))) || '')), utils !== null && utils !== void 0 && (_utils$translation7 = utils.translation) !== null && _utils$translation7 !== void 0 && _utils$translation7.call(utils, (_setting === null || _setting === void 0 ? void 0 : _setting.buttonText) || (_setting === null || _setting === void 0 || (_setting$buttonConfig = _setting.buttonConfig) === null || _setting$buttonConfig === void 0 ? void 0 : _setting$buttonConfig.text)) ? /*#__PURE__*/React.createElement("div", {
    className: "pisell-wallet-guide-button-wrap"
  }, /*#__PURE__*/React.createElement(Button, {
    style: {
      backgroundColor: (_setting === null || _setting === void 0 ? void 0 : _setting.buttonColor) || '#7F56D9',
      borderColor: (_setting === null || _setting === void 0 ? void 0 : _setting.buttonBorderColor) || '#7F56D9'
    },
    onClick: function onClick(e) {
      return handleClick(e);
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: getTextStyle(_setting === null || _setting === void 0 ? void 0 : _setting.buttonConfig, {
      weight: 600
    })
  }, (utils === null || utils === void 0 || (_utils$translation8 = utils.translation) === null || _utils$translation8 === void 0 ? void 0 : _utils$translation8.call(utils, (_setting === null || _setting === void 0 ? void 0 : _setting.buttonText) || (_setting === null || _setting === void 0 || (_setting$buttonConfig2 = _setting.buttonConfig) === null || _setting$buttonConfig2 === void 0 ? void 0 : _setting$buttonConfig2.text))) || ''))) : null));
};
export default Guide;