import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import { Teleport, computed, defineComponent, watch, ref, createVNode as _createVNode } from 'vue';
import classNames from '../_util/classNames';
import KeyCode from '../_util/KeyCode';
export default 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 = ref();
    const hovering = ref(false);
    const percent = ref(0);
    const spentTime = ref(0);
    expose({
      rootRef
    });
    const mergedHovering = computed(() => props.hovering || hovering.value);
    const duration = computed(() => props.duration === undefined ? 4.5 : props.duration);
    const mergedShowProgress = computed(() => duration.value > 0 && props.showProgress);
    const pauseOnHover = 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.ENTER) {
        close();
      }
    };
    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
    });
    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 = _createVNode("div", _objectSpread({
        "ref": rootRef,
        "class": classNames(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), [_createVNode("div", {
        "class": `${componentClass}-content`
      }, [(_b = slots.default) === null || _b === void 0 ? void 0 : _b.call(slots)]), closable ? _createVNode("a", {
        "tabindex": 0,
        "onClick": close,
        "class": `${componentClass}-close`
      }, [closeIcon || _createVNode("span", {
        "class": `${componentClass}-close-x`
      }, null)]) : null, mergedShowProgress.value ? _createVNode("progress", {
        "class": `${componentClass}-progress`,
        "max": "100",
        "value": validPercent
      }, [validPercent + '%']) : null]);
      if (holder) {
        return _createVNode(Teleport, {
          "to": holder
        }, {
          default: () => node
        });
      }
      return node;
    };
  }
});