import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
import { AdminAccess } from "../../utility/access";
import { useNavigate } from "react-router-dom";
import { AuthContext } from "../Auth/auth";
import { BuildContext } from "../Build/build";
import { Button, LangContext, Column, Row, Props, Select } from "v-eris";
import "./routes.menu.scss";
export var RoutesMenu = function (props) {
    var _a = useState(false), profileExpanded = _a[0], setProfileExpanded = _a[1];
    var coreListWrap = useRef(null);
    var auth = useContext(AuthContext);
    var lang = useContext(LangContext);
    var build = useContext(BuildContext);
    var nav = useNavigate();
    var routesList = useMemo(function () {
        var list = [];
        for (var key in build.routes) {
            var item = build.routes[key];
            if (item.access > auth.access || item.hidden)
                continue;
            list.push({ icon: item.icon, value: key, title: item.title });
        }
        ;
        return list;
    }, [build.routes]);
    useEffect(function () {
        var fn = function (event) {
            if (!coreListWrap.current)
                return;
            var inside = coreListWrap.current.contains(event.target);
            if (inside)
                return;
            setProfileExpanded(false);
        };
        document.addEventListener("mousedown", fn);
        return function () {
            document.removeEventListener("mousedown", fn);
        };
    }, [profileExpanded]);
    return (React.createElement("div", { className: "eris-routes-menu-container" },
        React.createElement("div", { className: "eris-routes-menu-profile" },
            React.createElement("div", { className: "eris-routes-menu-profile-user", onClick: function () { setProfileExpanded(!profileExpanded); } })),
        React.createElement("div", { className: Props.className("eris-routes-menu-list", { expanded: profileExpanded }), ref: coreListWrap },
            React.createElement("div", { className: "eris-routes-menu-list-bg" }),
            React.createElement(Column, { className: "eris-routes-menu-list-line" },
                React.createElement(Row, null,
                    React.createElement("span", { className: "eris-routes-menu-list-line-title" },
                        lang.get("Admin::Table::Users::Name"),
                        ":"),
                    React.createElement("span", { className: "eris-routes-menu-list-line-value" }, auth.name)),
                React.createElement(Row, null,
                    React.createElement("span", { className: "eris-routes-menu-list-line-title" },
                        lang.get("Admin::Table::Users::Role"),
                        ":"),
                    React.createElement("span", { className: "eris-routes-menu-list-line-value" }, auth.roleName)),
                React.createElement(Row, null,
                    React.createElement("span", { className: "eris-routes-menu-list-line-title" },
                        lang.get("Admin::Table::Users::Configuration"),
                        ":"),
                    React.createElement("span", { className: "eris-routes-menu-list-line-value" }, auth.configurationName)),
                React.createElement(Row, null,
                    React.createElement("span", { className: "eris-routes-menu-list-line-title" },
                        lang.get("Admin::Table::Users::Access2"),
                        ":"),
                    React.createElement("span", { className: "eris-routes-menu-list-line-value" }, lang.get(AdminAccess["access::" + auth.access])))),
            React.createElement(Select, { headerless: true, className: routesList.length < 2 ? "hidden" : "", value: build.route, onChange: function (event) { return nav(event.value); }, list: routesList }),
            React.createElement(Row, { className: "eris-routes-menu-list-line eris-routes-menu-list-bottom", reverse: true },
                React.createElement(Button, { onClick: function () {
                        if (auth.persona) {
                            auth.dispatch(["access", { value: 0 }]);
                        }
                        else {
                            auth.async.logout.fetch();
                        }
                        ;
                    } }, auth.persona ? lang.get("Auth::PersonaReLogin") : lang.get("Auth::LogOut"))))));
};
//# sourceMappingURL=routes.menu.js.map