import { __assign, __rest } from "tslib";
import React, { useMemo, useContext, memo } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { Row, Props, Common, LangContext, Select, Divider, Text, Space } from "v-eris";
import { Icons } from "../../icons/icons.extend";
export var TemplatesBlock = memo(function (props) {
    var section = props.section, subsection = props.subsection, dynamic = props.dynamic, qs = props.qs, data = props.data, alone = props.alone, selected = props.selected, token = props.token, rest = __rest(props, ["section", "subsection", "dynamic", "qs", "data", "alone", "selected", "token"]);
    var lang = useContext(LangContext);
    var location = useLocation();
    var nav = useNavigate();
    var sectionElements = useMemo(function () {
        var array = (section ? (section.children || []) : []).map(function (item) {
            return { value: item.key || item.name, title: lang.get(item.name), length: "", widgets: item.list };
        });
        if (array.length < 2)
            return React.createElement("div", { key: "sections" });
        return (React.createElement("div", { key: "sections" },
            React.createElement(Select, { stretch: true, headerless: true, row: true, value: qs.subsection, onSelect: function (v) {
                    nav(Common.setQuery(location, { section: qs.section, subsection: v.value, token: token }));
                }, list: array }),
            React.createElement(Divider, null)));
    }, [section, qs]);
    var widgetsElements = useMemo(function () {
        var array = subsection && subsection.list ? subsection.list : [];
        var n = 0;
        return array.map(function (item) {
            n++;
            return (React.createElement("div", { key: item.name },
                item.title ? (React.createElement("div", { className: "eris-templates-header" },
                    React.createElement("div", null, lang.get(item.title)),
                    React.createElement(Space, null))) : null,
                React.createElement(item.module, __assign(__assign({}, item.props), { data: data })),
                n >= array.length ? (null) : (React.createElement(Divider, null))));
        });
    }, [sectionElements, qs.subsection, dynamic.list]);
    var elements = useMemo(function () {
        if (!section.headerParams) {
            return (React.createElement("div", null));
        }
        ;
        if (Array.isArray(section.headerParams)) {
            return section.headerParams.map(function (name) {
                var value = data[name];
                return React.createElement(Row, { className: "eris-templates-item", key: name },
                    React.createElement(Text, { className: "eris-templates-item-key" },
                        lang.get("AeroInfo::" + name) || name,
                        ": "),
                    React.createElement(Text, { className: "eris-templates-item-value" }, value));
            });
        }
        ;
        return (React.createElement("div", null, React.createElement(section.headerParams.module, __assign(__assign({}, section.headerParams.props), { data: data }))));
    }, [data, section.headerParams]);
    return (React.createElement("div", { className: Props.className("eris-templates-block", { selected: selected, alone: alone }) },
        React.createElement("div", { className: "eris-templates-back", onClick: function () {
                nav(Common.setQuery(location, { section: qs.section, subsection: qs.subsection, token: undefined }));
            } },
            React.createElement(Icons.exit, null),
            lang.get("TemplatesModuleBlock::Back")),
        elements,
        React.createElement(Space, null),
        React.createElement("div", { className: "eris-templates-select", onClick: function () {
                nav(Common.setQuery(location, { section: qs.section, subsection: qs.subsection, token: token }));
            } },
            React.createElement(Icons.info, null),
            lang.get("TemplatesModuleBlock::More")),
        selected || alone ? ([sectionElements, widgetsElements]) : (null),
        React.createElement(Divider, null)));
});
//# sourceMappingURL=templates.block.js.map