import React, { memo, useCallback, useEffect, useRef } from 'react';
import classNames from 'classnames';
import { Hero } from "./components/Hero";
import { SessionLines } from "./components/SessionLines";
import { SaleDetailFooter } from "./components/SaleDetailFooter";
import ActionButtons from "./components/ActionButtons";
import "./PaymentResultToastV2.less";
var PREFIX = 'payment-result-toast-v2';

/**
 * V2 支付结果 Toast —— 纯展示组件，样式参考 demo。
 * 由全局管理器（PaymentResultToastV2Provider）渲染到游离容器中，
 * 容器负责左下角定位与堆叠，本组件只渲染卡片本身。
 */
var PaymentResultToastV2 = /*#__PURE__*/memo(function (props) {
  var status = props.status,
    tone = props.tone,
    headline = props.headline,
    changeDueText = props.changeDueText,
    failureReason = props.failureReason,
    sessionLines = props.sessionLines,
    footer = props.footer,
    _props$visible = props.visible,
    visible = _props$visible === void 0 ? true : _props$visible,
    onClose = props.onClose,
    className = props.className,
    _props$actionButtons = props.actionButtons,
    actionButtons = _props$actionButtons === void 0 ? [] : _props$actionButtons,
    _props$autoClose = props.autoClose,
    autoClose = _props$autoClose === void 0 ? false : _props$autoClose,
    _props$autoCloseDelay = props.autoCloseDelay,
    autoCloseDelay = _props$autoCloseDelay === void 0 ? 10 : _props$autoCloseDelay,
    _props$showCountdownP = props.showCountdownProgress,
    showCountdownProgress = _props$showCountdownP === void 0 ? true : _props$showCountdownP,
    onCountdownComplete = props.onCountdownComplete,
    _props$closable = props.closable,
    closable = _props$closable === void 0 ? true : _props$closable,
    _props$clickOutsideTo = props.clickOutsideToClose,
    clickOutsideToClose = _props$clickOutsideTo === void 0 ? true : _props$clickOutsideTo;
  var cardRef = useRef(null);
  var progressFillRef = useRef(null);
  var rafIdRef = useRef(0);
  // 用户是否已与 toast 交互（点击过卡片内部）。一旦交互即停止倒计时且不再重启。
  var interactedRef = useRef(false);
  var onCloseRef = useRef(onClose);
  var onCountdownCompleteRef = useRef(onCountdownComplete);
  onCloseRef.current = onClose;
  onCountdownCompleteRef.current = onCountdownComplete;
  var stopProgress = useCallback(function () {
    if (rafIdRef.current) {
      cancelAnimationFrame(rafIdRef.current);
      rafIdRef.current = 0;
    }
  }, []);
  var handleClose = useCallback(function () {
    var _onCloseRef$current;
    stopProgress();
    (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 || _onCloseRef$current.call(onCloseRef);
  }, [stopProgress]);

  // 点击过 toast（卡片内部任意位置）即视为交互：停止倒计时（进度条冻结在当前进度），不再自动关闭。
  var handleInteract = useCallback(function () {
    if (interactedRef.current) return;
    interactedRef.current = true;
    stopProgress();
  }, [stopProgress]);

  // 倒计时进度条（rAF 驱动，参考 demo）
  useEffect(function () {
    if (!visible || !autoClose || interactedRef.current) {
      stopProgress();
      return undefined;
    }
    var durationMs = Math.max(0, autoCloseDelay * 1000);
    var startedAt = performance.now();
    var tick = function tick(now) {
      var elapsed = now - startedAt;
      var remaining = durationMs > 0 ? Math.max(0, 1 - elapsed / durationMs) : 0;
      if (progressFillRef.current) {
        progressFillRef.current.style.width = "".concat(remaining * 100, "%");
      }
      if (remaining <= 0) {
        var _onCountdownCompleteR, _onCloseRef$current2;
        stopProgress();
        (_onCountdownCompleteR = onCountdownCompleteRef.current) === null || _onCountdownCompleteR === void 0 || _onCountdownCompleteR.call(onCountdownCompleteRef);
        (_onCloseRef$current2 = onCloseRef.current) === null || _onCloseRef$current2 === void 0 || _onCloseRef$current2.call(onCloseRef);
        return;
      }
      rafIdRef.current = requestAnimationFrame(tick);
    };
    if (progressFillRef.current) {
      progressFillRef.current.style.width = '100%';
    }
    rafIdRef.current = requestAnimationFrame(tick);
    return stopProgress;
  }, [visible, autoClose, autoCloseDelay, stopProgress]);

  // 点击外部关闭
  useEffect(function () {
    if (!clickOutsideToClose || !visible) {
      return undefined;
    }
    var handleClickOutside = function handleClickOutside(event) {
      var card = cardRef.current;
      var target = event.target;
      if (!card || !target) return;
      if (!card.contains(target)) {
        handleClose();
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    document.addEventListener('pointerup', handleClickOutside);
    return function () {
      document.removeEventListener('mousedown', handleClickOutside);
      document.removeEventListener('pointerup', handleClickOutside);
    };
  }, [clickOutsideToClose, visible, handleClose]);
  if (!visible) {
    return null;
  }
  var showProgress = autoClose && showCountdownProgress;
  var hasActions = actionButtons && actionButtons.length > 0;
  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(PREFIX, "-root")
  }, /*#__PURE__*/React.createElement("div", {
    ref: cardRef,
    className: classNames(PREFIX, "".concat(PREFIX, "--").concat(tone), "".concat(PREFIX, "--").concat(status), className),
    onMouseDownCapture: handleInteract
  }, closable ? /*#__PURE__*/React.createElement("button", {
    type: "button",
    className: "".concat(PREFIX, "__close"),
    "aria-label": "Close",
    onClick: handleClose
  }, "\xD7") : null, /*#__PURE__*/React.createElement(Hero, {
    status: status,
    tone: tone,
    headline: headline,
    changeDueText: changeDueText,
    failureReason: failureReason
  }), showProgress ? /*#__PURE__*/React.createElement("div", {
    className: "".concat(PREFIX, "__progress"),
    "aria-hidden": "true"
  }, /*#__PURE__*/React.createElement("div", {
    ref: progressFillRef,
    className: "".concat(PREFIX, "__progress-fill")
  })) : null, /*#__PURE__*/React.createElement(SessionLines, {
    lines: sessionLines
  }), footer ? /*#__PURE__*/React.createElement(SaleDetailFooter, {
    footer: footer
  }) : null, hasActions ? /*#__PURE__*/React.createElement("div", {
    className: "".concat(PREFIX, "__actions")
  }, /*#__PURE__*/React.createElement(ActionButtons, {
    buttonGroupList: actionButtons,
    tone: tone
  })) : null));
});
PaymentResultToastV2.displayName = 'PaymentResultToastV2';
export default PaymentResultToastV2;