import { __rest } from "tslib";
import React, { useMemo, useContext } from "react";
import { Props, Common, LangContext, Select, Divider, Card, Space } from "v-eris";
import { TemplatesBlock } from "./templates.block";
import { useNavigate, useLocation } from "react-router-dom";
import "./templates.scss";
export var Templates = function (props) {
    var className = props.className, rest = __rest(props, ["className"]);
    var lang = useContext(LangContext);
    var location = useLocation();
    var nav = useNavigate();
    var qs = Common.parseQuery(location);
    qs.section = Common.string(qs.section || "");
    qs.subsection = Common.string(qs.subsection || "");
    qs.token = Common.string(qs.token || "");
    var section = props.templates[qs.section];
    if (!section || !props.value[qs.section] || !props.value[qs.section].length) {
        for (var templateKey in props.templates) {
            var item = props.templates[templateKey];
            if (!props.value[item.key] || !props.value[item.key].length)
                continue;
            qs.section = item.key;
            section = item;
            break;
        }
        ;
        if (!section) {
            for (var templateKey in props.templates) {
                qs.section = props.templates[templateKey].key;
                section = props.value[qs.section] || [];
                break;
            }
            ;
        }
        ;
    }
    ;
    var value = props.value[qs.section];
    var subsection = (section.children || []).find(function (f) { return f.key == qs.subsection; });
    if (!subsection) {
        qs.subsection = section.children && section.children[0] ? section.children[0].key : "";
        subsection = section.children ? (section.children[0] || []) : [];
    }
    ;
    var dynamic = useMemo(function () {
        var list = [];
        var dynamicData = value;
        if (!dynamicData || !dynamicData.length || !section)
            return { data: dynamicData, list: list, clusters: !!section.clusters };
        for (var _i = 0, dynamicData_1 = dynamicData; _i < dynamicData_1.length; _i++) {
            var item = dynamicData_1[_i];
            if (!item.list || !Array.isArray(item.list) || !item.list.length)
                continue;
            var cluster = section.clusters ? [] : list;
            for (var _a = 0, _b = item.list; _a < _b.length; _a++) {
                var itemData = _b[_a];
                cluster.push(itemData);
            }
            ;
            if (section.clusters)
                list.push({ value: item.type, title: lang.get(item.type), list: cluster, length: cluster.length || "" });
        }
        ;
        return { data: dynamicData, list: list, clusters: !!section.clusters };
    }, [qs.section, value]);
    var headerElements = useMemo(function () {
        var result = [];
        for (var itemKey in props.templates) {
            var item = props.templates[itemKey];
            var length_1 = 0;
            var array = props.value[item.key] || [];
            for (var _i = 0, array_1 = array; _i < array_1.length; _i++) {
                var part = array_1[_i];
                length_1 += (part.list || []).length;
            }
            ;
            if (!length_1)
                continue;
            result.push({
                icon: item.icon,
                value: item.key,
                key: item.key,
                title: lang.get(item.name),
                length: length_1 || ""
            });
        }
        ;
        return result;
    }, [
        props.value,
    ]);
    var sectionInfo = useMemo(function () {
        if (section.empty) {
            return dynamic.data.map(function (item, index) { return (React.createElement("div", { key: item.id + ":" + index }, React.createElement(section.module, { data: item }))); });
        }
        ;
        var array = dynamic.list;
        if (!array.length)
            return null;
        if (dynamic.clusters) {
            array = dynamic.list.find(function (f) { return f.value == qs.cluster; });
            if (array)
                array = array.list;
            else
                array = dynamic.list[0] ? (dynamic.list[0].list || []) : [];
        }
        ;
        var alone = array.length > 1 ? false : true;
        var selected = qs.token ? array.find(function (f) { return qs.token == f.id; }) : null;
        if (selected) {
            array = [selected];
        }
        ;
        return array.map(function (item, index) { return (React.createElement(TemplatesBlock, { key: item.id + ":" + index, token: item.id, section: section, subsection: subsection, selected: selected, alone: alone, qs: qs, dynamic: dynamic, data: item })); });
    }, [qs, value]);
    return (React.createElement("div", { className: Props.className("eris-templates-container") },
        React.createElement(Select, { style: { display: headerElements.length > 1 ? undefined : "none" }, stretch: true, headerless: true, row: true, value: qs.section, onSelect: function (v) {
                var s = props.templates[v.value];
                nav(Common.setQuery(location, { section: v.value, subsection: s && s.children && s.children[0] ? (s.children[0].key || s.children[0].name) : "", cluster: "" }));
            }, list: headerElements }),
        React.createElement(Divider, { style: { display: headerElements.length > 1 ? undefined : "none" } }),
        dynamic.clusters && dynamic.list.length > 1 ?
            (React.createElement("div", null,
                React.createElement(Select, { stretch: true, headerless: true, row: true, value: qs.cluster, onSelect: function (v) {
                        nav(Common.setQuery(location, { section: qs.section, cluster: v.value, token: "" }));
                    }, list: dynamic.list }),
                React.createElement(Divider, null)))
            :
                null,
        React.createElement("div", null, section.key == "settings" ?
            (sectionInfo)
            :
                (React.createElement("div", { className: Props.className("eris-templates") },
                    React.createElement(Card, { header: React.createElement("div", { className: "eris-templates-title" },
                            section.icon,
                            React.createElement(Space, null),
                            lang.get(section.name)) }, sectionInfo))))));
};
//# sourceMappingURL=templates.js.map