import {renderToaster, renderToast} from './notification/ui';
import registerSwipe from './notification/touch';

const VISIBLE_TOASTS_AMOUNT = 3;
const TOAST_LIFETIME = 4000;
const GAP = 14;
const TIME_BEFORE_UNMOUNT = 200;

window.ToastinTakin = {
    init() {
        if (reinitializeToaster()) {
            return;
        }
        renderToaster();

        const toaster = document.getElementById("toaster");
        registerMouseOver(toaster);
        registerKeyboardShortcuts(toaster);
    },
    success(msg) {
        ToastinTakin.show(msg, "success");
    },
    error(msg) {
        ToastinTakin.show(msg, "error");
    },
    info(msg) {
        ToastinTakin.show(msg, "info");
    },
    warning(msg) {
        ToastinTakin.show(msg, "warning");
    },
    show(msg, type) {
        const list = document.getElementById("toaster");
        const { toast, id } = renderToast(list, msg, type);

        const el = list.children[0];
        const height = el.getBoundingClientRect().height;

        el.dataset.initialHeight = height;
        el.dataset.hidden = false;
        list.style.setProperty("--front-toast-height", `${height}px`);

        registerSwipe(id);
        refreshProperties();
        if(list.dataset.expanded === "false") {
            registerRemoveTimeout(el);
        }
    },
    remove(id) {
        const el = document.querySelector(`[data-toast-id="${id}"]`);
        if (!el) {
            return;
        }
        el.dataset.removed = true;

        refreshProperties();

        const previousTid = el.dataset.unmountTid;
        if (previousTid) window.clearTimeout(previousTid);

        const tid = window.setTimeout(function () {
            el.parentElement?.removeChild(el);
        }, TIME_BEFORE_UNMOUNT);
        el.dataset.unmountTid = tid;
    },
};

function registerRemoveTimeout(el) {
    const tid = window.setTimeout(function () {
        ToastinTakin.remove(el.dataset.toastId);
    }, TOAST_LIFETIME);
    el.dataset.removeTid = tid;
}

function reinitializeToaster() {
    const ol = document.getElementById("toaster");
    if (!ol) {
        return;
    }
    for (let i = 0; i < ol.children.length; i++) {
        const el = ol.children[i];
        const id = el.dataset.toastId;
        registerSwipe(id);
        refreshProperties();
        registerRemoveTimeout(el);
    }
    return ol;
}

function registerMouseOver(ol) {
    ol.addEventListener("mouseenter", function () {
        ol.dataset.expanded = true;
        for(let el of ol.children) {
            clearRemoveTimeout(el);
        }
    });

    ol.addEventListener("mouseleave", function () {
        ol.dataset.expanded = false;
        for(let el of ol.children) {
            registerRemoveTimeout(el);
        }
    });
}

function registerKeyboardShortcuts(ol) {
    window.addEventListener("keydown", function (e) {
        if (e.altKey && e.code === "KeyT") {
            if (ol.children.length === 0) {
                return;
            }
            e.preventDefault();
            ol.dataset.expanded = ol.dataset.expanded === "true" ? "false" : "true";;
        }
    });
}

function clearRemoveTimeout(el) {
    const tid = el.dataset.removeTid;
    if (tid) window.clearTimeout(tid);
}

function refreshProperties() {
    const list = document.getElementById("toaster");
    let heightsBefore = 0;
    let removed = 0;
    for (let i = 0; i < list.children.length; i++) {
        const el = list.children[i];
        if (el.dataset.removed === "true") {
            removed++;
            continue;
        }
        const idx = i - removed;

        el.dataset.index = idx;
        el.dataset.front = (idx === 0).toString();
        el.dataset.hidden = (idx > VISIBLE_TOASTS_AMOUNT).toString();
        el.style.setProperty("--index", idx);
        el.style.setProperty("--offset", `${GAP * idx + heightsBefore}px`);
        el.style.setProperty("z-index", list.children.length - i);
        heightsBefore += Number(el.dataset.initialHeight);
    }
    list.style.setProperty('--full-height', `${heightsBefore + GAP * list.children.length}px`);
}