import React, { useEffect, useMemo, useContext } from "react";
import { Card, List, LangContext, Common, useAsync, Space, Column, Row } from "v-eris";
import { ContentMenu } from "../../placeholders/ContentMenu/content.menu";
import { ContentContainer } from "../../placeholders/ContentContainer/content.container";
import { useNavigate, useLocation } from "react-router-dom";
import { useStorage, StorageContext } from "../../utility/use.storage";
import { BuildContext } from "../../components/Build/build";
var AdminCreateLine = function (route, types, props, updateTable) {
    var k = props.k, parameter = props.parameter, lang = props.lang, qs = props.qs, nav = props.nav, location = props.location, section = props.section, value = props.value, storage = props.storage, paramsOverride = props.paramsOverride;
    var storageValue = storage.getValue(k);
    var v = parameter.path ? (qs[parameter.path]) : (storageValue === undefined ? value : storageValue);
    if (v === undefined) {
        v = parameter.value;
    }
    ;
    updateTable[k] = v;
    return React.cloneElement(types[parameter.type], {
        lang: lang,
        params: parameter.params,
        extra: parameter.extra,
        filter: parameter.filter,
        dynamic: parameter.dynamic,
        paramsOverride: paramsOverride,
        value: v,
        qs: qs,
        route: route.sections[section].route,
        feedback: function (value, extra) {
            storage.change(k, value);
        },
        onChange: function (e) {
            var _a;
            storage.change(k, e.value);
            if (parameter.path)
                nav(Common.setQuery(location, (_a = {}, _a[parameter.path] = e.value, _a)));
        }
    });
};
export var AdminRoute = function () {
    var lang = useContext(LangContext);
    var nav = useNavigate();
    var location = useLocation();
    var qs = Common.parseQuery(location);
    var build = useContext(BuildContext);
    var route = build.routes["admin"];
    qs.section = Common.string(qs.section || "");
    qs.token = Common.string(qs.token || "");
    if (!route.sections[Common.string(qs.section)])
        qs.section = "Users";
    var section = qs.section;
    var sectionItem = route.sections[section] || {};
    var sectionTable = route.table[section] || [];
    var routeStorage = useStorage({
        token: "default",
        section: sectionItem.route || "",
        current: sectionItem.global,
        ignoreList: true,
    });
    var roles = useAsync({
        method: "POST",
        url: "./roles/list/"
    }, {});
    roles.onResponse(function (response) {
        routeStorage.overwrite("roles", response.data);
    });
    useEffect(function () {
        roles.fetch();
    }, [qs.section]);
    var policy = useAsync({
        method: "POST",
        url: "./policy/list/"
    }, {});
    policy.onResponse(function (response) {
        routeStorage.overwrite("policy", response.data);
    });
    useEffect(function () {
        policy.fetch();
    }, [qs.section]);
    var configurations = useAsync({
        method: "POST",
        url: "./configurations/list/"
    }, {});
    configurations.onResponse(function (response) {
        routeStorage.overwrite("configurations", response.data);
    });
    useEffect(function () {
        configurations.fetch();
    }, [qs.section]);
    var paramsOverride = {
        save: {
            onChange: function (e, params) {
                e.stopPropagation();
                routeStorage.save({ parseKeys: true });
            }
        }
    };
    var contentList = useMemo(function () {
        var updateTable = {};
        var elements = sectionTable.map(function (item) {
            return (React.createElement(Card, { className: "eris-line", key: item.key, header: item.title ? (React.createElement("span", null,
                    item.icon,
                    React.createElement(Space, null),
                    lang.get(item.title))) : null }, (item.list || []).map(function (parameter) {
                var key = parameter.key; //PermissionParamToKey( qs.section as string, item.key, parameter.key );
                return React.createElement(Card, { key: key, header: parameter.title ?
                        (React.createElement("div", null,
                            lang.get(parameter.title),
                            React.createElement(Space, null)))
                        :
                            null }, React.createElement(Column, { className: "content-parameter" },
                    parameter.desc ?
                        (React.createElement(Row, { align: "center" },
                            React.createElement(Row, null, (parameter.left || []).map(function (p1) {
                                var k = p1.key; //PermissionParamToKey( qs.section as string, item.key, p1.key );
                                return React.createElement(React.Fragment, { key: k },
                                    AdminCreateLine(route, build.types, {
                                        k: k,
                                        value: p1.value,
                                        parameter: p1,
                                        paramsOverride: paramsOverride[p1.key],
                                        lang: lang,
                                        qs: qs,
                                        nav: nav,
                                        location: location,
                                        section: section,
                                        storage: routeStorage
                                    }, updateTable),
                                    React.createElement(Space, null));
                            })),
                            React.createElement(Row, null, lang.get(parameter.desc)),
                            React.createElement(Row, null, (parameter.right || []).map(function (p1) {
                                var k = p1.key; //PermissionParamToKey( qs.section as string, item.key, p1.key );
                                return React.createElement(React.Fragment, { key: k },
                                    React.createElement(Space, null),
                                    AdminCreateLine(route, build.types, {
                                        k: k,
                                        value: p1.value,
                                        parameter: p1,
                                        paramsOverride: paramsOverride[p1.key],
                                        lang: lang,
                                        qs: qs,
                                        nav: nav,
                                        location: location,
                                        section: section,
                                        storage: routeStorage
                                    }, updateTable));
                            })))) : null,
                    React.createElement(Row, null, AdminCreateLine(route, build.types, {
                        k: key,
                        value: item.value,
                        parameter: parameter,
                        paramsOverride: paramsOverride[parameter.key],
                        lang: lang,
                        qs: qs,
                        nav: nav,
                        location: location,
                        section: section,
                        storage: routeStorage
                    }, updateTable))));
            })));
        });
        routeStorage.changeMulti(updateTable);
        return elements;
    }, [qs.section, qs.token, routeStorage.it, build.currentLang]);
    return (React.createElement(StorageContext.Provider, { value: routeStorage },
        React.createElement("div", { className: "eris-content eris-content-selector" },
            React.createElement(ContentMenu, null,
                React.createElement(List, { value: Common.setQuery(location, { section: qs.section }), onChange: function (event) { return nav(event.value); }, padding: [3, 6, 3, 8] }, route.list.map(function (item) {
                    var list = item.list || [];
                    return (React.createElement(List.Item, { key: item.key, title: lang.get(item.title), icon: item.icon, value: Common.setQuery(location, { section: item.key }) }, list.length ?
                        (list.map(function (child) {
                            return React.createElement(List.Item, { key: item.key + ":" + child.key, title: lang.get(child.title), icon: child.icon, value: Common.setQuery(location, { section: child.key }) }, lang.get(child.title));
                        }))
                        :
                            (lang.get(item.title))));
                }))),
            React.createElement(ContentContainer, null,
                React.createElement("div", { className: "eris-content-header" },
                    React.createElement(Space, null),
                    React.createElement(Space, null)),
                React.createElement("div", { className: "eris-content-wrap" },
                    React.createElement(Card, { className: "eris-content-card" }, contentList))))));
};
//# sourceMappingURL=admin.route.js.map