"use strict";

exports.__esModule = true;
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _clsx = _interopRequireDefault(require("clsx"));

var _icons = require("@react-vant/icons");

var _useRect = require("../hooks/use-rect");

var _useEventListener = _interopRequireDefault(require("../hooks/use-event-listener"));

var _utils = require("../utils");

var _raf = require("../utils/raf");

var _hooks = require("../hooks");

var _ConfigProviderContext = _interopRequireDefault(require("../config-provider/ConfigProviderContext"));

var _PopupContext = _interopRequireDefault(require("../popup/PopupContext"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var NoticeBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
  var text = props.text,
      color = props.color,
      background = props.background,
      wrapable = props.wrapable,
      scrollable = props.scrollable,
      speed = props.speed,
      _props$delay = props.delay,
      delay = _props$delay === void 0 ? 1 : _props$delay;

  var _useContext = (0, _react.useContext)(_ConfigProviderContext.default),
      prefixCls = _useContext.prefixCls,
      createNamespace = _useContext.createNamespace;

  var popupContext = (0, _react.useContext)(_PopupContext.default);

  var _createNamespace = createNamespace('notice-bar', prefixCls),
      bem = _createNamespace[0];

  var _useSetState = (0, _hooks.useSetState)({
    show: true,
    offset: 0,
    duration: 0
  }),
      state = _useSetState[0],
      setState = _useSetState[1];

  var wrapRef = (0, _react.useRef)();
  var contentRef = (0, _react.useRef)();
  var wrapWidth = (0, _react.useRef)(0);
  var contentWidth = (0, _react.useRef)(0);
  var startTimer = (0, _react.useRef)(null);

  var renderLeftIcon = function renderLeftIcon() {
    if (props.leftIcon) {
      return /*#__PURE__*/_react.default.cloneElement(props.leftIcon, {
        className: (0, _clsx.default)(bem('left-icon'))
      });
    }

    return null;
  };

  var getRightIcon = function getRightIcon() {
    if (props.mode === 'closeable') {
      return /*#__PURE__*/_react.default.createElement(_icons.Cross, null);
    }

    if (props.mode === 'link') {
      return /*#__PURE__*/_react.default.createElement(_icons.Arrow, null);
    }

    return null;
  };

  var onClickRightIcon = function onClickRightIcon(event) {
    if (props.mode === 'closeable') {
      setState({
        show: false
      });

      if (props.onClose) {
        props.onClose(event);
      }
    }
  }; //  右侧图标


  var renderRightIcon = function renderRightIcon() {
    if (props.rightIcon) {
      return props.rightIcon;
    }

    var finalRightIcon = props.rightIcon || getRightIcon();

    if (finalRightIcon) {
      return /*#__PURE__*/_react.default.cloneElement(finalRightIcon, {
        className: (0, _clsx.default)(bem('right-icon')),
        onClick: onClickRightIcon
      });
    }

    return null;
  }; //  动画结束


  var onTransitionEnd = function onTransitionEnd() {
    setState({
      offset: wrapWidth.current,
      duration: 0
    });
    (0, _raf.raf)(function () {
      // use double raf to ensure animation can start
      (0, _raf.doubleRaf)(function () {
        setState({
          offset: -contentWidth.current,
          duration: (contentWidth.current + wrapWidth.current) / speed
        });

        if (props.onReplay) {
          props.onReplay();
        }
      });
    });
  }; //  文字部分


  var renderMarquee = function renderMarquee() {
    var ellipsis = scrollable === false && !props.wrapable;
    var style = {
      transform: state.offset ? "translateX(" + state.offset + "px)" : '',
      transitionDuration: state.duration + "s"
    };
    return /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _clsx.default)(bem('wrap')),
      ref: wrapRef
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _clsx.default)(bem('content'), {
        'rv-ellipsis': ellipsis
      }),
      ref: contentRef,
      style: style,
      onTransitionEnd: onTransitionEnd
    }, props.children || text));
  };

  var reset = function reset() {
    var ms = (0, _utils.isDef)(delay) ? +delay * 1000 : 0;
    wrapWidth.current = 0;
    contentWidth.current = 0;
    setState({
      offset: 0,
      duration: 0
    });
    clearTimeout(startTimer.current);
    startTimer.current = setTimeout(function () {
      if (!wrapRef.current || !contentRef.current || scrollable === false) {
        return;
      }

      var wrapRefWidth = (0, _useRect.getRect)(wrapRef.current).width;
      var contentRefWidth = (0, _useRect.getRect)(contentRef.current).width;

      if (scrollable || contentRefWidth > wrapRefWidth) {
        (0, _raf.doubleRaf)(function () {
          wrapWidth.current = wrapRefWidth;
          contentWidth.current = contentRefWidth;
          setState({
            offset: -contentWidth.current,
            duration: contentWidth.current / speed
          });
        });
      }
    }, ms);
  }; // fix cache issues with forwards and back history in safari
  // see: https://guwii.com/cache-issues-with-forwards-and-back-history-in-safari/


  (0, _useEventListener.default)('pageshow', reset);
  (0, _react.useEffect)(function () {
    reset();
  }, [text, scrollable]);
  (0, _hooks.useUpdateEffect)(function () {
    reset();
  }, [popupContext.visible]);
  (0, _react.useImperativeHandle)(ref, function () {
    return {
      reset: reset
    };
  });
  return state.show && /*#__PURE__*/_react.default.createElement("div", {
    role: "alert",
    className: (0, _clsx.default)(bem({
      wrapable: wrapable
    }), props.className),
    style: _extends({
      color: color,
      background: background
    }, props.style),
    onClick: props.onClick
  }, renderLeftIcon(), renderMarquee(), renderRightIcon());
});
NoticeBar.defaultProps = {
  delay: 1,
  speed: 60,
  onClick: _utils.noop,
  onClose: _utils.noop
};
var _default = NoticeBar;
exports.default = _default;