import { __assign, __rest } from "tslib";
import React, { useState, useRef, useEffect, useMemo, Fragment, useContext } from "react";
import { Button, Card, Column, Common, Props, Row, Space, useAnimation } from "v-eris";
import { BuildContext } from "../components/Build/build";
import { TypeRemove } from "../types/types.remove";
import "./types.table.params.scss";
export 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 = __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 = useState(selected), forceSelected = _a[0], setForceSelected = _a[1];
    var timeout = useRef(0);
    var childrenElem = useAnimation.Expand(selected ? forceSelected : false, //only approve animation if content already inside div
    { title: title, minHeight: "1px" });
    var statusWrap = useRef(null);
    var statusInterval = useRef(0);
    var _b = useState({
        date: new Date(),
        success: 0,
    }), lastSave = _b[0], setLastSave = _b[1];
    var build = useContext(BuildContext);
    if (!value)
        value = {};
    if (!params)
        params = [];
    var change = function (key, valueArg) {
        if (storage) {
            storage.change(key, valueArg);
            return;
        }
        ;
        var v = __assign({}, value);
        v[key] = valueArg;
        if (!onChange)
            return;
        onChange({ value: v });
    };
    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", [Common.uint(((+(new Date())) - (+lastSave.date)) / 1000.0)]))
            :
                (lastSave.success == -1 ?
                    (lang.get("Apply::Failure", [Common.uint(((+(new Date())) - (+lastSave.date)) / 1000.0)]))
                    :
                        null));
    };
    var constructStatus = function () {
        if (!statusWrap.current)
            return;
        statusWrap.current.innerHTML = constructStatusValue();
    };
    useEffect(function () {
        clearInterval(statusInterval.current);
        statusInterval.current = setInterval(constructStatus, 1000);
        return function () {
            clearInterval(statusInterval.current);
        };
    }, [lastSave.date]);
    useEffect(function () {
        return function () {
            clearTimeout(timeout.current);
            document.removeEventListener("keyup", keyListener);
            clearInterval(statusInterval.current);
        };
    }, []);
    useEffect(function () {
        document.addEventListener("keyup", keyListener);
        return function () {
            document.removeEventListener("keyup", keyListener);
        };
    }, [value]);
    var content = useMemo(function () {
        if (mini && !forceSelected) {
            return React.createElement("div", null);
        }
        ;
        return (React.createElement(Card, { className: 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.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.createElement(Fragment, { key: item.key },
                    React.createElement(Row, null,
                        title,
                        title ? ":" : "",
                        title ? React.createElement(Space, null) : null),
                    React.createElement(Row, null, element)))
                :
                    (React.createElement(Column, { key: item.key },
                        React.createElement("div", { className: "settings-type-params-left" },
                            title,
                            title ? ":" : ""),
                        React.createElement("div", { className: "settings-type-params-right" }, element)));
        })));
    }, [lang, params, icon, title, forceSelected, mini, selected, value, storage ? storage.changed : null]);
    return (React.createElement("div", { className: Props.className("settings-type-params", { mini: mini, system: system }), ref: mini ? childrenElem : null },
        React.createElement("div", { className: Props.className("settings-type-params-header") },
            title,
            React.createElement(Button, { onClick: function () { onCancel(); } }, lang.get("Cancel"))),
        content,
        React.createElement("div", { className: Props.className("settings-type-params-bottom") },
            React.createElement(Row, { className: "settings-type-params-tools" },
                React.createElement("div", { className: Props.className("settings-type-params-status", { success: lastSave.success == 1, failure: lastSave.success == -1 }), ref: statusWrap }, constructStatusValue()),
                React.createElement(Button, { success: true, onClick: function () { save(); } }, lang.get("Apply")),
                React.createElement(TypeRemove, { onClick: onRemove, isText: true })))));
};
//# sourceMappingURL=types.table.params.js.map