"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _vue = require("vue");
var _classNames = _interopRequireDefault(require("../_util/classNames"));
var _KeyCode = _interopRequireDefault(require("../_util/KeyCode"));
var _default = exports.default = (0, _vue.defineComponent)({
  name: 'Notice',
  inheritAttrs: false,
  props: ['prefixCls', 'duration', 'updateMark', 'noticeKey', 'closeIcon', 'closable', 'props', 'onClick', 'onClose', 'holder', 'visible', 'onMouseenter', 'onMouseleave', 'showProgress', 'pauseOnHover', 'hovering'],
  setup(props, {
    attrs,
    slots,
    expose
  }) {
    const rootRef = (0, _vue.ref)();
    const hovering = (0, _vue.ref)(false);
    const percent = (0, _vue.ref)(0);
    const spentTime = (0, _vue.ref)(0);
    expose({
      rootRef
    });
    const mergedHovering = (0, _vue.computed)(() => props.hovering || hovering.value);
    const duration = (0, _vue.computed)(() => props.duration === undefined ? 4.5 : props.duration);
    const mergedShowProgress = (0, _vue.computed)(() => duration.value > 0 && props.showProgress);
    const pauseOnHover = (0, _vue.computed)(() => props.pauseOnHover === undefined ? true : props.pauseOnHover);
    // ======================== Close =========================
    const close = e => {
      if (e) {
        e.stopPropagation();
      }
      // clearCloseTimer();
      const {
        onClose,
        noticeKey
      } = props;
      if (onClose) {
        onClose(noticeKey);
      }
    };
    const onCloseKeyDown = e => {
      if (e.key === 'Enter' || e.code === 'Enter' || e.keyCode === _KeyCode.default.ENTER) {
        close();
      }
    };
    (0, _vue.watch)([mergedHovering, duration], ([mergedHovering, duration], _, onCleanup) => {
      if (!mergedHovering && duration > 0) {
        const start = Date.now() - spentTime.value;
        const timeout = setTimeout(() => {
          close();
        }, duration * 1000 - spentTime.value);
        onCleanup(() => {
          if (pauseOnHover.value) {
            clearTimeout(timeout);
          }
          spentTime.value = Date.now() - start;
        });
      }
    }, {
      flush: 'post',
      immediate: true
    });
    (0, _vue.watch)([duration, spentTime, mergedHovering, mergedShowProgress], ([duration, spentTime, mergedHovering, mergedShowProgress], _, onCleanup) => {
      if (!mergedHovering && mergedShowProgress && (pauseOnHover.value || spentTime === 0)) {
        const start = performance.now();
        let animationFrame;
        const calculate = () => {
          cancelAnimationFrame(animationFrame);
          animationFrame = requestAnimationFrame(timestamp => {
            const runtime = timestamp + spentTime - start;
            const progress = Math.min(runtime / (duration * 1000), 1);
            percent.value = progress * 100;
            if (progress < 1) {
              calculate();
            }
          });
        };
        calculate();
        onCleanup(() => {
          if (pauseOnHover.value) {
            cancelAnimationFrame(animationFrame);
          }
        });
      }
    }, {
      flush: 'post',
      immediate: true
    });
    return () => {
      var _a, _b;
      const {
        prefixCls,
        closable,
        closeIcon = (_a = slots.closeIcon) === null || _a === void 0 ? void 0 : _a.call(slots),
        onClick,
        holder
      } = props;
      const {
        class: className,
        style
      } = attrs;
      const componentClass = `${prefixCls}-notice`;
      const dataOrAriaAttributeProps = Object.keys(attrs).reduce((acc, key) => {
        if (key.startsWith('data-') || key.startsWith('aria-') || key === 'role') {
          acc[key] = attrs[key];
        }
        return acc;
      }, {});
      const validPercent = 100 - (!percent.value || percent.value < 0 ? 0 : percent.value > 100 ? 100 : percent.value);
      const node = (0, _vue.createVNode)("div", (0, _objectSpread2.default)({
        "ref": rootRef,
        "class": (0, _classNames.default)(componentClass, className, {
          [`${componentClass}-closable`]: closable
        }),
        "style": style,
        "onMouseenter": () => {
          var _a;
          hovering.value = true;
          (_a = props.onMouseenter) === null || _a === void 0 ? void 0 : _a.call(props);
        },
        "onMouseleave": () => {
          var _a;
          hovering.value = false;
          (_a = props.onMouseleave) === null || _a === void 0 ? void 0 : _a.call(props);
        },
        "onKeydown": onCloseKeyDown,
        "onClick": onClick
      }, dataOrAriaAttributeProps), [(0, _vue.createVNode)("div", {
        "class": `${componentClass}-content`
      }, [(_b = slots.default) === null || _b === void 0 ? void 0 : _b.call(slots)]), closable ? (0, _vue.createVNode)("a", {
        "tabindex": 0,
        "onClick": close,
        "class": `${componentClass}-close`
      }, [closeIcon || (0, _vue.createVNode)("span", {
        "class": `${componentClass}-close-x`
      }, null)]) : null, mergedShowProgress.value ? (0, _vue.createVNode)("progress", {
        "class": `${componentClass}-progress`,
        "max": "100",
        "value": validPercent
      }, [validPercent + '%']) : null]);
      if (holder) {
        return (0, _vue.createVNode)(_vue.Teleport, {
          "to": holder
        }, {
          default: () => node
        });
      }
      return node;
    };
  }
});