"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TypeTableParams = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var v_eris_1 = require("v-eris");
var build_1 = require("../components/Build/build");
var types_remove_1 = require("../types/types.remove");
require("./types.table.params.scss");
var TypeTableParams = function (props) {
    var value = props.value, token = props.token, storage = props.storage, icon = props.icon, title = props.title, params = props.params, lang = props.lang, roles = props.roles, policy = props.policy, inactive = props.inactive, selected = props.selected, mini = props.mini, onChange = props.onChange, onCancel = props.onCancel, onEdit = props.onEdit, onSave = props.onSave, onRemove = props.onRemove, paramsOverride = props.paramsOverride, qs = props.qs, route = props.route, system = props.system, rest = tslib_1.__rest(props, ["value", "token", "storage", "icon", "title", "params", "lang", "roles", "policy", "inactive", "selected", "mini", "onChange", "onCancel", "onEdit", "onSave", "onRemove", "paramsOverride", "qs", "route", "system"]);
    var _a = (0, react_1.useState)(selected), forceSelected = _a[0], setForceSelected = _a[1];
    var timeout = (0, react_1.useRef)(0);
    var childrenElem = v_eris_1.useAnimation.Expand(selected ? forceSelected : false, //only approve animation if content already inside div
    { title: title, minHeight: "1px" });
    var statusWrap = (0, react_1.useRef)(null);
    var statusInterval = (0, react_1.useRef)(0);
    var _b = (0, react_1.useState)({
        date: new Date(),
        success: 0,
    }), lastSave = _b[0], setLastSave = _b[1];
    var build = (0, react_1.useContext)(build_1.BuildContext);
    if (!value)
        value = {};
    if (!params)
        params = [];
    var change = function (key, valueArg) {
        if (storage) {
            storage.change(key, valueArg);
            return;
        }
        ;
        var v = tslib_1.__assign({}, value);
        v[key] = valueArg;
        if (!onChange)
            return;
        onChange({ value: v });
    };
    (0, react_1.useEffect)(function () {
        setLastSave({
            date: new Date(),
            success: 0,
        });
        clearTimeout(timeout.current);
        if (!forceSelected && selected) {
            setForceSelected(true);
            return;
        }
        ;
        if (forceSelected && !selected) {
            timeout.current = setTimeout(function () {
                timeout.current = 0;
                setForceSelected(false);
            }, 1000);
            return;
        }
        ;
    }, [selected]);
    var save = function () {
        onSave({
            success: function (result) {
                setLastSave({
                    date: new Date(),
                    success: 1,
                });
            },
            failure: function (result) {
                setLastSave({
                    date: new Date(),
                    success: -1,
                });
            },
        });
    };
    var keyListener = function (event) {
        if (event.keyCode == 27) {
            onCancel();
        }
        ;
        if (event.keyCode == 13) {
            save();
        }
        ;
    };
    var constructStatusValue = function () {
        return (lastSave.success == 1 ?
            (lang.get("Apply::Success", [v_eris_1.Common.uint(((+(new Date())) - (+lastSave.date)) / 1000.0)]))
            :
                (lastSave.success == -1 ?
                    (lang.get("Apply::Failure", [v_eris_1.Common.uint(((+(new Date())) - (+lastSave.date)) / 1000.0)]))
                    :
                        null));
    };
    var constructStatus = function () {
        if (!statusWrap.current)
            return;
        statusWrap.current.innerHTML = constructStatusValue();
    };
    (0, react_1.useEffect)(function () {
        clearInterval(statusInterval.current);
        statusInterval.current = setInterval(constructStatus, 1000);
        return function () {
            clearInterval(statusInterval.current);
        };
    }, [lastSave.date]);
    (0, react_1.useEffect)(function () {
        return function () {
            clearTimeout(timeout.current);
            document.removeEventListener("keyup", keyListener);
            clearInterval(statusInterval.current);
        };
    }, []);
    (0, react_1.useEffect)(function () {
        document.addEventListener("keyup", keyListener);
        return function () {
            document.removeEventListener("keyup", keyListener);
        };
    }, [value]);
    var content = (0, react_1.useMemo)(function () {
        if (mini && !forceSelected) {
            return react_1.default.createElement("div", null);
        }
        ;
        return (react_1.default.createElement(v_eris_1.Card, { className: v_eris_1.Props.className("settings-type-params-content"), headerless: true }, params.map(function (item) {
            if (mini && !item.mini)
                return null;
            var title = lang.get(item.title);
            var element = react_1.default.cloneElement(build.types[item.type], {
                value: storage && storage.getValue(item.key) !== undefined ? storage.getValue(item.key) : (value[item.key] === undefined ? item.value : value[item.key]),
                k: item.key,
                params: item.params,
                storage: storage,
                lang: lang,
                stack: item.stack,
                permissions: null,
                qs: qs,
                route: item.route ? item.route : route,
                group: item.group,
                inactive: item.inactive === undefined ? inactive : item.inactive,
                nested: true,
                roles: roles,
                policy: policy,
                token: token,
                paramsOverride: paramsOverride[item.key],
                onChange: function (e, keyIndex) {
                    change(item.key, e.value);
                }
            });
            return item.newLine && (!mini || item.type == "table") ?
                (react_1.default.createElement(react_1.Fragment, { key: item.key },
                    react_1.default.createElement(v_eris_1.Row, null,
                        title,
                        title ? ":" : "",
                        title ? react_1.default.createElement(v_eris_1.Space, null) : null),
                    react_1.default.createElement(v_eris_1.Row, null, element)))
                :
                    (react_1.default.createElement(v_eris_1.Column, { key: item.key },
                        react_1.default.createElement("div", { className: "settings-type-params-left" },
                            title,
                            title ? ":" : ""),
                        react_1.default.createElement("div", { className: "settings-type-params-right" }, element)));
        })));
    }, [lang, params, icon, title, forceSelected, mini, selected, value, storage ? storage.changed : null]);
    return (react_1.default.createElement("div", { className: v_eris_1.Props.className("settings-type-params", { mini: mini, system: system }), ref: mini ? childrenElem : null },
        react_1.default.createElement("div", { className: v_eris_1.Props.className("settings-type-params-header") },
            title,
            react_1.default.createElement(v_eris_1.Button, { onClick: function () { onCancel(); } }, lang.get("Cancel"))),
        content,
        react_1.default.createElement("div", { className: v_eris_1.Props.className("settings-type-params-bottom") },
            react_1.default.createElement(v_eris_1.Row, { className: "settings-type-params-tools" },
                react_1.default.createElement("div", { className: v_eris_1.Props.className("settings-type-params-status", { success: lastSave.success == 1, failure: lastSave.success == -1 }), ref: statusWrap }, constructStatusValue()),
                react_1.default.createElement(v_eris_1.Button, { success: true, onClick: function () { save(); } }, lang.get("Apply")),
                react_1.default.createElement(types_remove_1.TypeRemove, { onClick: onRemove, isText: true })))));
};
exports.TypeTableParams = TypeTableParams;
//# sourceMappingURL=types.table.params.js.map