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/plus/walletPassGallery/components/passDetail/index.tsx
var passDetail_exports = {};
__export(passDetail_exports, {
  default: () => passDetail_default
});
module.exports = __toCommonJS(passDetail_exports);
var import_react = __toESM(require("react"));
var import_antd = require("antd");
var import_ahooks = require("ahooks");
var import_classnames = __toESM(require("classnames"));
var import_utils = require("@pisell/utils");
var import_materials = require("@pisell/materials");
var import_utils2 = require("../../../productSelect/utils");
var import_CategoryTabs = __toESM(require("../../../productSelect/CategoryTabs"));
var import_IntersectionObserver = __toESM(require("../../../productSelect/components/IntersectionObserver"));
var import_serve = require("../../serve");
var import_usageRule = __toESM(require("../usageRule"));
var import_timelineSection = __toESM(require("../timelineSection"));
var import_recharge = __toESM(require("../recharge"));
var import_footerButton = __toESM(require("../footerButton"));
var import_useEngineContext = __toESM(require("../../../../hooks/useEngineContext"));
var import_index = require("./index.less");
var import_utils3 = require("../../../../components/wallet/utils");
var import_locales = __toESM(require("../../locales"));
var import_utils4 = require("../../../../utils");
var { Text } = import_antd.Typography;
var PassDetail = (props) => {
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
  const { symbol = "$" } = (0, import_materials.usePisellConfig)();
  const {
    dataSource,
    platform = "pc",
    showTimeLine = true,
    onListRefresh
  } = props;
  const [activeKey, setActiveKey] = (0, import_react.useState)("detail");
  const [rechargeOpen, setRechargeOpen] = (0, import_react.useState)(false);
  const containerRef = (0, import_react.useRef)(null);
  const isIndicatorVisibleRef = (0, import_react.useRef)(false);
  const context = (0, import_useEngineContext.default)();
  const { store, isTerminal, interaction, isApp } = (_a = context.appHelper) == null ? void 0 : _a.utils;
  const { apiPrefix } = ((_b = context.appHelper) == null ? void 0 : _b.constants) || { apiPrefix: "/h5" };
  const timezone = ((_g = (_f = (_e = (_d = (_c = store == null ? void 0 : store.getState) == null ? void 0 : _c.call(store)) == null ? void 0 : _d.global) == null ? void 0 : _e.symbol) == null ? void 0 : _f.shop) == null ? void 0 : _g.timezone) || "Asia/Shanghai";
  const isTerminalEnv = (typeof isTerminal === "function" ? isTerminal() : !!isTerminal) || (isApp == null ? void 0 : isApp());
  import_utils.locales.init(import_locales.default, ((_i = (_h = context == null ? void 0 : context.engine) == null ? void 0 : _h.props) == null ? void 0 : _i.locale) || "en");
  if ((_k = (_j = context.appHelper) == null ? void 0 : _j.utils) == null ? void 0 : _k.request) {
    import_utils4.request.setRequest((_m = (_l = context.appHelper) == null ? void 0 : _l.utils) == null ? void 0 : _m.request);
  }
  const {
    id = "",
    code = "",
    tag = "",
    product_title = "",
    encoded = "",
    balance,
    expire_date = "",
    product = {},
    custom_schedule_snapshot,
    customer_id
  } = dataSource || {};
  const {
    description = "",
    extension_data = [],
    customer_order_behavior_count = 0
  } = product || {};
  const _getDetail = (0, import_ahooks.useRequest)(
    () => (0, import_serve.getDetailApi)({
      id,
      apiPrefix,
      order_behavior_count_customer_id: customer_id
    }),
    {
      ready: !!id,
      refreshDeps: [id, customer_id]
    }
  );
  (0, import_react.useEffect)(() => {
    var _a2, _b2;
    (_b2 = (_a2 = interaction == null ? void 0 : interaction.utils) == null ? void 0 : _a2.mountFunction) == null ? void 0 : _b2.call(
      _a2,
      "customer",
      "recharge",
      async (strVal) => {
        return onListRefresh == null ? void 0 : onListRefresh();
      }
    );
  }, [id]);
  const scheduleList = (0, import_react.useMemo)(() => {
    return (custom_schedule_snapshot == null ? void 0 : custom_schedule_snapshot.data) || [];
  }, [custom_schedule_snapshot]);
  (0, import_react.useEffect)(() => {
    if (tag === "product_discount_card") {
      setActiveKey("detail");
    }
    if (containerRef.current) {
      containerRef.current.scrollTop = 0;
    }
  }, [id, tag]);
  const _anchorOptions = (0, import_react.useMemo)(() => {
    const options = [
      {
        key: "detail",
        label: import_utils.locales.getText("wallet-pass-gallery.detail")
      }
    ];
    if (tag !== "product_discount_card") {
      options.push({
        key: "activityLog",
        label: import_utils.locales.getText("wallet-pass-gallery.activelog")
      });
    }
    return options;
  }, [dataSource == null ? void 0 : dataSource.tag]);
  const debounceIndicator = (0, import_react.useCallback)((delay) => {
    isIndicatorVisibleRef.current = true;
    const timeoutId = setTimeout(() => {
      isIndicatorVisibleRef.current = false;
    }, delay);
    return () => clearTimeout(timeoutId);
  }, []);
  const descs = (0, import_react.useMemo)(() => {
    var _a2, _b2, _c2;
    const detail = (0, import_utils3.formatScheduleText)(
      scheduleList,
      (_b2 = (_a2 = context == null ? void 0 : context.engine) == null ? void 0 : _a2.props) == null ? void 0 : _b2.locale
    );
    let expireText = expire_date ? expire_date : import_utils.locales.getText("wallet-pass-gallery.expireDate");
    if (scheduleList.length > 0) {
      let validityTexts = "";
      let excludedText = "";
      let includedText = "";
      detail.forEach((item) => {
        if (item.validityTexts.length > 0) {
          validityTexts = `${validityTexts}${item.validityTexts.join("\n")}
`;
        }
        if (item.excluded_date.length > 0) {
          excludedText = `${excludedText}${item.excluded_date.join("\n")}
`;
        }
        if (item.included_date.length > 0) {
          includedText = `${includedText}${item.included_date.join("\n")}
`;
        }
      });
      expireText = /* @__PURE__ */ import_react.default.createElement("span", { className: "wallet-detail-expire-text" }, validityTexts, excludedText && /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-detail-expire-text-title" }, import_utils.locales.getText("page.wallet.notValidDate")), excludedText, includedText && /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-detail-expire-text-title" }, import_utils.locales.getText("page.wallet.includedDate")), includedText);
    }
    let data = [
      {
        label: import_utils.locales.getText("wallet-pass-gallery.cardName"),
        value: product_title
      },
      {
        label: import_utils.locales.getText("wallet-pass-gallery.carNumber"),
        value: encoded,
        isLink: false
      },
      {
        label: import_utils.locales.getText("wallet-pass-gallery.validDate"),
        value: expireText
      }
    ];
    if (tag === "product_discount_card") {
      const isFixedAmount = ((_c2 = dataSource.metadata) == null ? void 0 : _c2.discount_card_type) === "fixed_amount";
      data.splice(2, 0, {
        label: import_utils.locales.getText("wallet-pass-gallery.discount"),
        value: balance ? isFixedAmount ? `${symbol}${Number(balance)}` : `${Number(balance)}%` : ""
      });
    } else if (tag === "point_card") {
      data.splice(2, 0, {
        label: import_utils.locales.getText("wallet-pass-gallery.points"),
        value: balance ? `${Number(balance)}` : ""
      });
    } else if (tag === "good_pass") {
      data.splice(2, 0, {
        label: import_utils.locales.getText("wallet-pass-gallery.goodPass"),
        value: balance ? `${Number(balance)}` : ""
      });
    } else {
      data.splice(2, 0, {
        label: import_utils.locales.getText("wallet-pass-gallery.balance"),
        value: balance ? `${symbol}${Number(balance)}` : ""
      });
    }
    return data;
  }, [dataSource]);
  const handleItemIntersectionIn = (0, import_react.useCallback)((_key) => {
    if (!isIndicatorVisibleRef.current && _key) {
      setActiveKey(_key);
    }
  }, []);
  const handleRechargeClick = (0, import_react.useCallback)(() => {
    var _a2, _b2;
    if (isTerminalEnv) {
      const productId = (product == null ? void 0 : product.id) || (dataSource == null ? void 0 : dataSource.product_id) || "";
      (_b2 = (_a2 = interaction == null ? void 0 : interaction.utils) == null ? void 0 : _a2.postMessageToApp) == null ? void 0 : _b2.call(_a2, {
        module: "customer",
        key: "recharge",
        data: {
          product_id: String(productId || ""),
          card_id: String(id || ""),
          card_code: String(code || ""),
          customer_id: String(customer_id || "")
        }
      });
      return;
    }
    setRechargeOpen(true);
  }, [isTerminalEnv, id, code, customer_id, product, dataSource]);
  if (!dataSource) {
    return /* @__PURE__ */ import_react.default.createElement(import_antd.Empty, null);
  }
  const _switchCategory = (key) => {
    setActiveKey(key);
    debounceIndicator(300);
    const categoryIndex = _anchorOptions.findIndex((item) => item.key === key);
    const _scrollParent = containerRef.current;
    if (!_scrollParent) return;
    const target = document.querySelector(
      `[data-anchor="${key}"]`
    );
    if (!target) return;
    const detailWrapper = document.querySelector(
      `.pisell-wallet-pass-gallery_detail-content`
    );
    const tabsWrapper = document.querySelector(
      `.pisell-wallet-pass-gallery-tabs-wrapper`
    );
    const tabsHeight = (tabsWrapper == null ? void 0 : tabsWrapper.offsetHeight) || 0;
    if (categoryIndex === 0) {
      if (detailWrapper) {
        const wrapperOffsetTop = (0, import_utils2.getOffsetTopRelativeToScrollContainer)(
          detailWrapper,
          _scrollParent
        );
        _scrollParent.scrollTop = wrapperOffsetTop;
      }
      return;
    } else {
      const listOffsetTop = (0, import_utils2.getOffsetTopRelativeToScrollContainer)(
        target,
        _scrollParent
      );
      _scrollParent.scrollTop = listOffsetTop - tabsHeight;
    }
  };
  const renderTimeLine = () => {
    if (tag === "product_discount_card") return null;
    if (!showTimeLine) return null;
    return /* @__PURE__ */ import_react.default.createElement(
      import_timelineSection.default,
      {
        code,
        tag,
        timezone,
        apiPrefix,
        isTerminalEnv,
        interaction
      }
    );
  };
  if (!props.dataSource) return null;
  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      className: (0, import_classnames.default)(
        `pisell-wallet-pass-gallery_detail`,
        `pisell-wallet-pass-gallery_detail-${platform}`,
        {
          [`pisell-wallet-pass-gallery_detail-with-footer`]: platform === "h5" && tag === "gift_card"
        }
      )
    },
    /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        className: "pisell-wallet-pass-gallery_detail-content",
        ref: containerRef
      },
      _anchorOptions.length > 1 && /* @__PURE__ */ import_react.default.createElement(
        import_CategoryTabs.default,
        {
          key: id,
          className: "pisell-wallet-pass-gallery-tabs-wrapper",
          activeKey,
          items: _anchorOptions,
          onChange: _switchCategory,
          loading: false,
          style: { padding: 0 }
        }
      ),
      /* @__PURE__ */ import_react.default.createElement(
        import_IntersectionObserver.default,
        {
          rootMargin: "-70px 0px -270px 0px",
          priorityMode: "top"
        },
        /* @__PURE__ */ import_react.default.createElement(
          import_IntersectionObserver.IntersectionTrigger,
          {
            style: { height: "1px" },
            onShow: () => handleItemIntersectionIn("detail")
          },
          /* @__PURE__ */ import_react.default.createElement("div", { "data-anchor": "detail" })
        ),
        /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(Text, { className: "pisell-wallet-pass-gallery_detail-title" }, import_utils.locales.getText("wallet-pass-gallery.details")), platform === "pc" && tag === "gift_card" && ((_n = dataSource == null ? void 0 : dataSource.machinecode_config) == null ? void 0 : _n.hide_recharge) === 0 && /* @__PURE__ */ import_react.default.createElement(
          import_antd.Button,
          {
            type: "primary",
            size: "large",
            onClick: handleRechargeClick
          },
          import_utils.locales.getText("wallet-pass-gallery.recharge")
        ), /* @__PURE__ */ import_react.default.createElement(
          import_materials.PisellStatisticList,
          {
            data: descs,
            labelColor: "#667085",
            valueColor: "#101828",
            backgroundColors: ["#fff"],
            isHasBorder: false
          }
        ), description && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-pass-gallery_detail-card-content-tip" }, /* @__PURE__ */ import_react.default.createElement("div", { dangerouslySetInnerHTML: { __html: description } })), /* @__PURE__ */ import_react.default.createElement(import_usageRule.default, { dataSource: _getDetail.data })),
        /* @__PURE__ */ import_react.default.createElement(
          import_IntersectionObserver.IntersectionTrigger,
          {
            style: { height: "1px" },
            onShow: () => handleItemIntersectionIn("activityLog")
          },
          /* @__PURE__ */ import_react.default.createElement("div", { "data-anchor": "activityLog" })
        ),
        /* @__PURE__ */ import_react.default.createElement("div", null, renderTimeLine())
      )
    )
  ), platform === "h5" && tag === "gift_card" ? /* @__PURE__ */ import_react.default.createElement(
    import_footerButton.default,
    {
      appleWalletUrl: (_o = _getDetail.data) == null ? void 0 : _o.apple_wallet_url,
      googleWalletUrl: (_p = _getDetail.data) == null ? void 0 : _p.google_wallet_url,
      onRechargeClick: ((_q = dataSource == null ? void 0 : dataSource.machinecode_config) == null ? void 0 : _q.hide_recharge) === 0 ? handleRechargeClick : void 0,
      platform
    }
  ) : null, /* @__PURE__ */ import_react.default.createElement(
    import_recharge.default,
    {
      platform,
      detailData: _getDetail.data,
      open: rechargeOpen,
      onClose: () => setRechargeOpen(false)
    }
  ));
};
var passDetail_default = PassDetail;
