import { __assign, __spreadArray } from "tslib";
import React, { useReducer, useState, useEffect, useMemo, useContext, useRef } from "react";
import { Common, LangContext, Props, Space, useAnimation, Icons } from "v-eris";
import "./notifications.scss";
;
export function NotificationsReducer(state, _a) {
    var type = _a[0], data = _a[1], lang = _a[2];
    if (type == "alert") {
        var appended = [];
        var index = state.index;
        if (!Array.isArray(data))
            data = [data];
        for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
            var line = data_1[_i];
            if (!line)
                continue;
            if (Array.isArray(line.tokens)) {
                for (var _b = 0, _c = line.tokens; _b < _c.length; _b++) {
                    var item = _c[_b];
                    appended.push({
                        token: Common.token(),
                        type: "alert",
                        code: line.code || 406,
                        desc: lang.get(item),
                        readed: false,
                        index: index++
                    });
                }
                ;
            }
            else {
                appended.push({
                    token: Common.token(),
                    type: "alert",
                    code: line.code || 406,
                    desc: line.desc || line.description || "",
                    readed: false,
                    index: index++
                });
            }
            ;
        }
        ;
        var list = __spreadArray(__spreadArray([], (appended.reverse()), true), state.list, true);
        list = list.splice(0, 5);
        return __assign(__assign({}, state), { index: index, list: list });
    }
    else if (type == "read") {
        var list = __spreadArray([], state.list, true);
        var index = list.findIndex(function (f) { return f.token == data; });
        if (index > -1)
            list[index].readed = true;
        return __assign(__assign({}, state), { list: list });
    }
    else if (type == "emptyReaded") {
        var list = [];
        for (var _d = 0, _e = state.list; _d < _e.length; _d++) {
            var item = _e[_d];
            if (item.readed)
                continue;
            list.push(item);
        }
        ;
        return __assign(__assign({}, state), { list: list });
    }
    ;
    return state;
}
;
export var NotificationsContextDefault = {
    state: {},
    list: [],
    dispatch: function () { },
    alert: function (data) { },
    read: function (token) { },
    emptyReaded: function () { },
    index: 0,
};
export var NotificationsContext = React.createContext(NotificationsContextDefault);
export var NotificationsModuleInit = function () {
    var _a = useReducer(NotificationsReducer, {
        index: 1,
        list: [],
    }), state = _a[0], dispatch = _a[1];
    var lang = useContext(LangContext);
    var alert = function (data) {
        dispatch(["alert", data, lang]);
    };
    var read = function (token) {
        dispatch(["read", token, lang]);
    };
    var emptyReaded = function (token) {
        dispatch(["emptyReaded", lang]);
    };
    return { state: state, dispatch: dispatch, list: state.list, index: state.index, alert: alert, read: read, emptyReaded: emptyReaded, context: NotificationsContext };
};
export var Notifications = function (props) {
    var lang = useContext(LangContext);
    var module = useContext(NotificationsContext);
    var _a = useState(false), hovered = _a[0], setHovered = _a[1];
    var childrenElem = useAnimation.Expand(hovered);
    var asyncSaveRef = useRef(module.index);
    var asyncSaveRefTimer = useRef(undefined);
    useEffect(function () {
        if (asyncSaveRef.current == module.index)
            return;
        setHovered(true);
        clearTimeout(asyncSaveRefTimer.current);
        asyncSaveRefTimer.current = setTimeout(function () {
            asyncSaveRef.current = module.index;
            setHovered(false);
        }, 3500);
    }, [module.index]);
    var freshNotices = useMemo(function () {
        var result = 0;
        for (var _i = 0, _a = module.list; _i < _a.length; _i++) {
            var item = _a[_i];
            if (item.readed)
                continue;
            result++;
        }
        ;
        return result;
    }, [module.list]);
    var content = useMemo(function () {
        return (React.createElement("div", { className: Props.className("eris-notifications", { hovered: hovered, hidden: !module.list.length }), onMouseOver: function (e) {
                clearTimeout(asyncSaveRefTimer.current);
                setHovered(true);
            }, onMouseOut: function (e) {
                clearTimeout(asyncSaveRefTimer.current);
                setHovered(false);
            } },
            React.createElement("div", { className: "eris-notifications-frame", ref: childrenElem }, module.list.map(function (item) {
                return (React.createElement("div", { className: Props.className("eris-notifications-line", { alert: !item.readed }), key: item.token, onMouseOver: function (e) { module.read(item.token); } },
                    React.createElement("div", { className: "eris-notifications-line-index" }, item.index),
                    React.createElement("div", { className: "eris-notifications-line-desc" }, item.desc),
                    React.createElement("div", { className: "eris-notifications-line-code" },
                        React.createElement("span", null, "code"),
                        React.createElement("span", null, item.code))));
            })),
            React.createElement("div", { className: "eris-notifications-button" },
                React.createElement(Icons.notification, null),
                React.createElement(Space, null),
                lang.get("Core::Notifications"),
                React.createElement(Space, null),
                React.createElement("span", { className: Props.className("eris-notifications-length", { alert: freshNotices > 0 }) }, "( " + (freshNotices) + " )"))));
    }, [module.list, hovered]);
    return (props.container ? (React.createElement("div", { className: "eris-notifications-container" }, content)) : (content));
};
//# sourceMappingURL=notifications.js.map