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

import React, { useRef, useEffect, useImperativeHandle, forwardRef, useContext } from 'react';
import clsx from 'clsx';
import { Arrow, Cross } from '@react-vant/icons';
import { getRect } from '../hooks/use-rect';
import useEventListener from '../hooks/use-event-listener';
import { isDef, noop } from '../utils';
import { raf, doubleRaf } from '../utils/raf';
import { useSetState, useUpdateEffect } from '../hooks';
import ConfigProviderContext from '../config-provider/ConfigProviderContext';
import PopupContext from '../popup/PopupContext';
var NoticeBar = /*#__PURE__*/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 = useContext(ConfigProviderContext),
      prefixCls = _useContext.prefixCls,
      createNamespace = _useContext.createNamespace;

  var popupContext = useContext(PopupContext);

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

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

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

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

    return null;
  };

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

    if (props.mode === 'link') {
      return /*#__PURE__*/React.createElement(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.cloneElement(finalRightIcon, {
        className: clsx(bem('right-icon')),
        onClick: onClickRightIcon
      });
    }

    return null;
  }; //  动画结束


  var onTransitionEnd = function onTransitionEnd() {
    setState({
      offset: wrapWidth.current,
      duration: 0
    });
    raf(function () {
      // use double raf to ensure animation can start
      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.createElement("div", {
      className: clsx(bem('wrap')),
      ref: wrapRef
    }, /*#__PURE__*/React.createElement("div", {
      className: clsx(bem('content'), {
        'rv-ellipsis': ellipsis
      }),
      ref: contentRef,
      style: style,
      onTransitionEnd: onTransitionEnd
    }, props.children || text));
  };

  var reset = function reset() {
    var ms = 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 = getRect(wrapRef.current).width;
      var contentRefWidth = getRect(contentRef.current).width;

      if (scrollable || contentRefWidth > wrapRefWidth) {
        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/


  useEventListener('pageshow', reset);
  useEffect(function () {
    reset();
  }, [text, scrollable]);
  useUpdateEffect(function () {
    reset();
  }, [popupContext.visible]);
  useImperativeHandle(ref, function () {
    return {
      reset: reset
    };
  });
  return state.show && /*#__PURE__*/React.createElement("div", {
    role: "alert",
    className: clsx(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: noop,
  onClose: noop
};
export default NoticeBar;