"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var jsx_runtime_1 = require("react/jsx-runtime");
var antd_1 = require("antd");
var loading_1 = __importDefault(require("components/share/loading"));
var register_1 = __importDefault(require("../register"));
var edit_table_1 = __importDefault(require("lib/hooks/edit-table"));
var A_1 = __importDefault(require("components/misc/A"));
var desc = {
    time_ago_absolute: "\nYou can display timestamps either as absolute points in time or relative to\nthe current time.",
    dark_mode: "Use Dark mode to reduce eye strain and save power by showing light text on a dark background.",
    extra: "dark reader",
};
(0, register_1.default)({
    path: "system/appearance",
    title: "Appearance",
    icon: "calendar-week",
    desc: "Configure dark mode and how times are displayed.",
    search: desc,
    Component: function () {
        var _a = (0, edit_table_1.default)({
            accounts: { other_settings: null },
        }), edited = _a.edited, original = _a.original, Save = _a.Save, EditBoolean = _a.EditBoolean, EditNumber = _a.EditNumber;
        if (original == null || edited == null) {
            return (0, jsx_runtime_1.jsx)(loading_1.default, {});
        }
        return ((0, jsx_runtime_1.jsxs)(antd_1.Space, __assign({ direction: "vertical", style: { width: "100%" } }, { children: [(0, jsx_runtime_1.jsx)(Save, {}), (0, jsx_runtime_1.jsx)(EditBoolean, { path: "other_settings.dark_mode", icon: "caret-square-right", desc: (0, jsx_runtime_1.jsxs)("div", __assign({ style: {
                            color: "rgba(229, 224, 216, 0.65)",
                            backgroundColor: "rgb(36, 37, 37)",
                            marginLeft: "-5px",
                            padding: "5px",
                            borderRadius: "3px",
                        } }, { children: [desc.dark_mode, " Dark mode is implemented using", " ", (0, jsx_runtime_1.jsx)(A_1.default, __assign({ style: { color: "#e96c4d", fontWeight: 700 }, href: "https://darkreader.org/" }, { children: "DARK READER" })), ", and currently only applies when you are actually editing files (e.g., it doesn't change this configuration page)."] })) }), edited.other_settings.dark_mode && ((0, jsx_runtime_1.jsx)("div", __assign({ style: { width: "100%" } }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ style: {
                            margin: "15px auto",
                            maxWidth: "700px",
                            border: "1px solid lightgrey",
                            padding: "15px",
                            borderRadius: "5px",
                        } }, { children: [(0, jsx_runtime_1.jsx)("h2", __assign({ style: { textAlign: "center" } }, { children: "Parameters" })), (0, jsx_runtime_1.jsx)(EditNumber, { path: "other_settings.dark_mode_brightness", title: "Brightness", min: 20, max: 100 }), (0, jsx_runtime_1.jsx)(EditNumber, { path: "other_settings.dark_mode_contrast", title: "Contrast", min: 20, max: 100 }), (0, jsx_runtime_1.jsx)(EditNumber, { path: "other_settings.dark_mode_sepia", title: "Sepia", min: 0, max: 100 }), (0, jsx_runtime_1.jsx)(EditNumber, { path: "other_settings.dark_mode_grayscale", title: "Grayscale", min: 0, max: 100 })] })) }))), (0, jsx_runtime_1.jsx)(EditBoolean, { path: "other_settings.time_ago_absolute", icon: "clock", title: "Timestamp Display", desc: desc.time_ago_absolute, label: "Display timestamps as absolute points in time" })] })));
    },
});
//# sourceMappingURL=appearance.js.map