"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 accounts_1 = require("@cocalc/util/db-schema/accounts");
const codemirror_1 = __importDefault(require("components/share/codemirror"));
const desc = {
    font_size: `
Newly opened files will open with this font size in pixels by default. You can
change the font size for a particular file (or editor frame) at any time,
and the setting is saved in your browser.
`,
    theme: `The editor theme determines the color scheme used by CodeMirror.
This impacts editing files and input cells of Jupyter notebooks.`,
    line_wrapping: `Enable line or word wrapping so that when I line is longer than the width of the editor,
the line will get wrapped so it stays visible, and there is no horizontal scroll bar.  Enabling
this can make it difficult to view the structure of some text involving longer lines, but avoids having
to scroll horizontally.`,
    line_numbers: `Display line numbers to the left of the editor content.`,
};
const EXAMPLE = `def is_prime_lucas_lehmer(p):
    """
    Test primality of Mersenne number 2**p - 1.  This is a long line hopefully illustrating line wrapping.

    >>> is_prime_lucas_lehmer(107)
    True
    """
    k = 2**p - 1; s = 4
    for i in range(3, p+1):
        s = (s*s - 2) % k
    return s == 0`;
(0, register_1.default)({
    path: "editor/appearance",
    title: "Appearance",
    icon: "font",
    desc: "Editor default font size, color theme, etc.",
    search: desc,
    Component: () => {
        const { edited, original, Save, EditBoolean, EditNumber, EditSelect } = (0, edit_table_1.default)({
            accounts: { font_size: null, editor_settings: null },
        });
        if (original == null || edited == null) {
            return (0, jsx_runtime_1.jsx)(loading_1.default, {});
        }
        return ((0, jsx_runtime_1.jsx)(antd_1.Space, { direction: "vertical", style: { width: "100%" }, children: (0, jsx_runtime_1.jsxs)(antd_1.Row, { children: [(0, jsx_runtime_1.jsxs)(antd_1.Col, { md: 14, sm: 24, style: { paddingRight: "15px" }, children: [(0, jsx_runtime_1.jsx)(Save, {}), (0, jsx_runtime_1.jsx)(EditNumber, { path: "font_size", icon: "text-height", title: "Default Font Size", desc: desc.font_size, min: 5, max: 32, units: "px" }), (0, jsx_runtime_1.jsx)(EditSelect, { path: "editor_settings.theme", icon: "colors", desc: desc.theme, options: accounts_1.EDITOR_COLOR_SCHEMES, style: { width: "30ex" } }), (0, jsx_runtime_1.jsx)(EditBoolean, { icon: "align-left", path: "editor_settings.line_wrapping", desc: desc.line_wrapping }), (0, jsx_runtime_1.jsx)(EditBoolean, { icon: "list-ol", path: "editor_settings.line_numbers", desc: desc.line_numbers })] }), (0, jsx_runtime_1.jsxs)(antd_1.Col, { md: 10, sm: 24, children: [(0, jsx_runtime_1.jsx)("h3", { style: { marginTop: "10px" }, children: "Preview" }), (0, jsx_runtime_1.jsx)(codemirror_1.default, { content: EXAMPLE, filename: "a.py", fontSize: edited.font_size, options: {
                                    // @ts-ignore
                                    theme: edited.editor_settings.theme,
                                    lineNumbers: edited.editor_settings.line_numbers,
                                    lineWrapping: edited.editor_settings.line_wrapping,
                                } })] })] }) }));
    },
});
//# sourceMappingURL=appearance.js.map