import { __rest, __spreadArray } from "tslib";
import React, { useState, useEffect, useMemo, useContext } from "react";
import { Common, Button, Props, Modal, useDelta } from "v-eris";
import { TypeTableParams } from "./types.table.params";
import { useStorage, StorageContext } from "../utility/use.storage";
import { ParseWhere } from "./types.appendix";
import { Pagination } from "./types.pagination";
import { BuildContext } from "../components/Build/build";
import { TypeRemove } from "./types.remove";
export var TypeTable = function (props) {
    var params = props.params, icon = props.icon, value = props.value, lang = props.lang, inactive = props.inactive, dynamic = props.dynamic, qs = props.qs, route = props.route, nested = props.nested, filter = props.filter, onChange = props.onChange, rest = __rest(props, ["params", "icon", "value", "lang", "inactive", "dynamic", "qs", "route", "nested", "filter", "onChange"]);
    var _a = useState(null), selectedLine = _a[0], setSelectedLine = _a[1];
    var _b = useState(null), selectedToken = _b[0], setSelectedToken = _b[1];
    var _c = useState(0), offset = _c[0], setOffset = _c[1];
    var _d = useState(20), limit = _d[0], setLimit = _d[1];
    var routeStorage = useContext(StorageContext);
    var build = useContext(BuildContext);
    var whereAny = props.group ? { token: props.value } : {};
    var where = useMemo(function () {
        return ParseWhere(filter, routeStorage);
        ;
    }, [route, filter, routeStorage.it]);
    useDelta(function () {
        setOffset(0);
        setSelectedLine(null);
        setSelectedToken(null);
    }, [where], where);
    useEffect(function () {
        setOffset(0);
        setSelectedLine(null);
        setSelectedToken(null);
    }, [route]);
    useEffect(function () {
        setSelectedLine(null);
        setSelectedToken(null);
    }, [offset, limit]);
    var storage = useStorage({
        token: selectedToken,
        where: where,
        whereAny: whereAny,
        section: route,
        offset: offset,
        limit: limit,
        pagination: true,
        current: selectedToken ? true : false,
    });
    var inList = selectedToken && storage.list.findIndex(function (f) { return f.token == selectedToken; }) > -1;
    var paramsOverride = {
        redirectConfiguration: {
            onChange: function (e, params) {
                e.stopPropagation();
                build.setQueryString("/settings" + build.buildQuery({ token: route + ":" + params.token }));
            }
        }
    };
    return (React.createElement("div", { className: Props.className("settings-type-table", { mini: nested }) },
        React.createElement("table", null,
            React.createElement("thead", null,
                React.createElement("tr", { className: "settings-type-table-header" },
                    React.createElement("th", null,
                        React.createElement(Button, { className: inactive || dynamic === false ? "hidden" : "", onClick: function () {
                                setOffset(0);
                                storage.add({ name: "", description: "" }, function (data) {
                                    setSelectedToken(data.token);
                                });
                            } }, "+")),
                    params.map(function (cell) {
                        if (!cell.mini || cell.mini > 1)
                            return null;
                        return React.createElement("th", { key: cell.key }, lang.get(cell.title) || cell.title);
                    }))),
            React.createElement("tbody", { className: "settings-type-table-content" }, storage.list.map(function (line) {
                var isSelected = selectedLine == line.token;
                var isSelectedToken = selectedToken == line.token;
                return (React.createElement("tr", { key: line.key, className: Props.className("settings-type-table-row", { selected: isSelected, hovered: isSelectedToken }), onClick: function (e) {
                        if (inactive)
                            return;
                        if (Common.insideClass(e.target, "button"))
                            return;
                        //setSelectedLine( line.token );
                        setSelectedToken(line.token);
                    } },
                    React.createElement("td", { className: "settings-type-table-cell", key: "index" }, line.index),
                    (params.map(function (cell) {
                        if (isSelected)
                            return null;
                        if (!cell.mini || cell.mini > 1)
                            return null;
                        return React.createElement("td", { className: "settings-type-table-cell", key: cell.key }, React.cloneElement(build.types[cell.type], {
                            value: cell.controlled ? (Array.isArray(value) ? !!value.find(function (f) { return f == line.token; }) : false) : (line[cell.key] === undefined ? cell.value : line[cell.key]),
                            k: cell.key,
                            params: cell.params,
                            lang: lang,
                            stack: cell.stack,
                            permissions: null,
                            qs: qs,
                            route: route,
                            inactive: true,
                            token: line.token,
                            paramsOverride: paramsOverride[cell.key],
                            onChange: function (e) {
                                if (!onChange)
                                    return;
                                var list = value ? __spreadArray([], value, true) : [];
                                list = list.filter(function (f) { return f != line.token; });
                                if (e.value)
                                    list.push(line.token);
                                onChange({ value: list });
                            }
                        }));
                    })),
                    React.createElement("td", { className: "settings-type-table-cell" + (inactive ? " hidden" : ""), key: "remove" },
                        React.createElement(TypeRemove, { onClick: function () { return storage.remove({ token: line.token }); } }))));
            }))),
        React.createElement(Pagination, { offset: offset, limit: limit, length: storage.length, autoHide: inactive, onChange: function (e) {
                setOffset(e.offset);
            } }),
        React.createElement(Modal, { className: "settings-type-params-modal", bg: true, active: selectedToken && inList, onClose: function () {
                setSelectedToken(null);
                //nav( Common.setQuery( location, { section: qs.section, token: undefined } ) );
            } }, selectedToken ? (React.createElement(TypeTableParams, { title: storage.getValue("name") || storage.getValue("token"), storage: storage, icon: icon, lang: lang, params: params, system: storage.getValue("system"), qs: qs, route: route, nested: true, token: selectedToken, paramsOverride: paramsOverride, onCancel: function () {
                setSelectedToken(null);
            }, onChange: function (e) {
                //setSelectedData( e.value );
            }, onSave: function (e) {
                storage.save({
                    success: e && e.success ? e.success : undefined,
                    failure: e && e.failure ? e.failure : undefined,
                });
            }, onRemove: function (e) {
                storage.remove({ token: selectedToken }, function () {
                    setSelectedToken(null);
                    //nav( Common.setQuery( location, { section: qs.section, token: undefined } ) );
                });
            } }))
            :
                null)));
};
//# sourceMappingURL=types.table.js.map