import Log from "../Log";
import IWHNotify from "../../interface/IWHNotify";
import NotificationUtils from "./NotificationUtils";
import WuhuBase from "../WuhuBase";
import MathUtils from "./MathUtils";

export default class Alert extends WuhuBase {
    private static container: HTMLElement = null;

    private notify: MyHTMLElement = null;
    private intervalID = -1;
    private readonly callback: Function;

    public constructor(msg: string, options: IWHNotify = {}) {
        super();

        let { timeout, callback, sysNotify, } = options;

        // 后台窗口、iframe内判断
        if (!Alert.glob.isWindowActive.get() || (self !== top)) return null;

        // 通知的容器
        if (Alert.container === null) Alert.initContainer();

        this.callback = callback || (() => null);
        Alert.create(this, msg, timeout || 3);
        Log.info('创建新通知：', this);
        if (sysNotify) NotificationUtils.getInstance().push(msg, options);
    }

    private static create(that: Alert, msg, timeout): void {
        let mathUtils: MathUtils = MathUtils.getInstance();
        // 通知的唯一id
        const uid = '' + mathUtils.getRandomInt(1000, 9999);
        // const uid = '' + performance.now();
        // 每条通知
        const element: MyHTMLElement = document.createElement('div');
        element.id = `wh-notify-${ uid }`;
        element.classList.add('wh-notify-item');
        element.innerHTML = `<div class="wh-notify-bar"></div>
<div class="wh-notify-cont">
    <div class="wh-notify-close"></div>
    <div class="wh-notify-msg"><p>${ msg }</p></div>
</div>`;
        this.container.append(element);
        // 进度条node
        const progressBar: HTMLElement = element.querySelector('.wh-notify-bar');
        // 是否hover
        let mouse_enter = false;
        element.addEventListener('mouseenter', () => mouse_enter = true, true);
        element.addEventListener('mouseleave', () => mouse_enter = false);
        // 通知进度条
        let progressCount = 101;
        // 计时器
        that.intervalID = window.setInterval(() => {
            if (mouse_enter) {
                progressCount = 101;
                progressBar.style.width = '100%';
                return;
            }
            progressCount--;
            progressBar.style.width = `${ progressCount }%`;
            if (progressCount === 0) {
                that.close();
            }
        }, timeout * 1000 / 100) as unknown as number;
        element.querySelector('.wh-notify-close').addEventListener('click', that.close);
        that.notify = element;
        Log.info(that.notify)
    }

    private static initContainer() {
        this.container = document.createElement('div');
        this.container.id = 'wh-notify';
        document.body.append(this.container);
    }

    public close() {
        this.notify.remove();
        this.notify = null;
        this.callback();
        let id = this.intervalID;
        window.clearInterval(id);
    }

    public getElement() {
        return this.notify;
    }
}