import Log from "../Log";
import IWHNotify from "../../interface/IWHNotify";
import NotificationUtils from "./NotificationUtils";
import WuhuBase from "../WuhuBase";
import MathUtils from "./MathUtils";
import NOTIFY_HTML from "../../static/html/notify.html";
import WindowActiveState from "../action/WindowActiveState";

export default class Alert extends WuhuBase {
    className = 'Alert';
    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, force } = options;

        // 后台窗口、iframe内判断
        if (!WindowActiveState.getInstance().get() || (self !== top)) {
            if (!force) {
                Log.warn('后台通知已被屏蔽');
                return null;
            } else {
                Log.info('强制后台通知');
            }
        }

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

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

    private static create(that: Alert, msg, timeout): void {
        // 通知的唯一id
        const uid = '' + MathUtils.getInstance().getRandomInt(1000, 9999);
        // 每条通知
        const element: MyHTMLElement = document.createElement('div');
        element.id = `wh-notify-${ uid }`;
        element.classList.add('wh-notify-item');
        element.innerHTML = NOTIFY_HTML.replace('{{}}', msg);
        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;
    }

    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();
        window.clearInterval(this.intervalID);
    }

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