"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const antd_1 = require("antd");
const loading_1 = __importDefault(require("components/share/loading"));
const register_1 = __importDefault(require("../register"));
const edit_table_1 = __importDefault(require("lib/hooks/edit-table"));
const A_1 = __importDefault(require("components/misc/A"));
const desc = {
    time_ago_absolute: `
You can display timestamps either as absolute points in time or relative to
the 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: () => {
        const { edited, original, Save, EditBoolean, EditNumber } = (0, edit_table_1.default)({
            accounts: { other_settings: null },
        });
        if (original == null || edited == null) {
            return (0, jsx_runtime_1.jsx)(loading_1.default, {});
        }
        return ((0, jsx_runtime_1.jsxs)(antd_1.Space, { 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", { 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, { 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", { style: { width: "100%" }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                            margin: "15px auto",
                            maxWidth: "700px",
                            border: "1px solid lightgrey",
                            padding: "15px",
                            borderRadius: "5px",
                        }, children: [(0, jsx_runtime_1.jsx)("h2", { 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