<!DOCTYPE html>
<html>
<head>
    <title>CodeMirrorModes Tool</title>

    <style>:root { color-scheme: light dark; }</style>
    <link rel="stylesheet" href="../../UserInterface/External/CodeMirror/codemirror.css">
    <link rel="stylesheet" href="../../UserInterface/Views/Variables.css">
    <link rel="stylesheet" href="../../UserInterface/Views/CodeMirrorOverrides.css">
    <link rel="stylesheet" href="../../UserInterface/Views/SyntaxHighlightingDefaultTheme.css">
    <link rel="stylesheet" href="../../UserInterface/Views/CodeMirrorLocalOverrideURLMode.css">
    <link rel="stylesheet" href="../../UserInterface/Views/CodeMirrorRegexMode.css">
    <link rel="stylesheet" href="styles.css">

    <script src="../../UserInterface/External/CodeMirror/codemirror.js"></script>
    <script src="../../UserInterface/External/CodeMirror/clike.js"></script>
    <script src="../../UserInterface/External/CodeMirror/clojure.js"></script>
    <script src="../../UserInterface/External/CodeMirror/coffeescript.js"></script>
    <script src="../../UserInterface/External/CodeMirror/css.js"></script>
    <script src="../../UserInterface/External/CodeMirror/css.js"></script>
    <script src="../../UserInterface/External/CodeMirror/htmlmixed.js"></script>
    <script src="../../UserInterface/External/CodeMirror/javascript.js"></script>
    <script src="../../UserInterface/External/CodeMirror/javascript.js"></script>
    <script src="../../UserInterface/External/CodeMirror/jsx.js"></script>
    <script src="../../UserInterface/External/CodeMirror/livescript.js"></script>
    <script src="../../UserInterface/External/CodeMirror/sass.js"></script>
    <script src="../../UserInterface/External/CodeMirror/sql.js"></script>
    <script src="../../UserInterface/External/CodeMirror/xml.js"></script>
    <script src="../../UserInterface/Views/CodeMirrorLocalOverrideURLMode.js"></script>
    <script src="../../UserInterface/Views/CodeMirrorRegexMode.js"></script>
</head>
<body>
    <h1>Debug CodeMirrorModes</h1>

    <!-- Controls -->
    <select id="mode">
        <optgroup label="Web Inspector">
            <option>text/x-local-override-url</option>
            <option>text/x-regex</option>
        </optgroup>
        <optgroup label="Web">
            <option>text/css</option>
            <option>text/html</option>
            <option>text/javascript</option>
            <option>text/plain</option>
            <option>text/xml</option>
        </optgroup>
        <optgroup id="extra-group" label="Extra Modes"></optgroup>
    </select>
    <button id="save-as-url">Save URL</button>
    <br><br>

    <!-- Editor -->
    <textarea id="code" name="code"></textarea>

    <script>
    const modeSelect = document.getElementById("mode");
    let cm = CodeMirror.fromTextArea(document.getElementById("code"), {lineNumbers: true});

    function update() {
        let mode = modeSelect.value;
        cm.setOption("mode", mode);

        let content;
        switch (mode) {
        case "text/x-local-override-url":
            content = "http://example.com/path/?query#frag";
            break;
        case "text/x-regex":
            content = "^\\d{2,3}.\\.*?(abc|[A-Z_])+\\1zzz$";
            break;
        default:
            content = cm.getValue() || "";
            break;
        }
        cm.setValue(content);
    }

    // Mode picker.
    modeSelect.addEventListener("change", (event) => { update(); });

    // Fill in additional options dynamically.
    const optgroup = document.getElementById("extra-group");
    let knownModes = new Set(Array.from(modeSelect.options).map((x) => x.value));
    let extraModes = Object.keys(CodeMirror.mimeModes).sort();
    for (let mode of extraModes) {
        if (knownModes.has(mode))
            continue;
        knownModes.add(mode);
        optgroup.appendChild(document.createElement("option")).textContent = mode;
    }

    // Save as URL button.
    document.getElementById("save-as-url").addEventListener("click", function(event) {
        let mode = modeSelect.value;
        let content = cm.getValue();
        window.location.search = `?mode=${encodeURIComponent(mode)}&content=${encodeURIComponent(content)}`;
    });

    // Initial content.
    update();

    // Restore better initial value from query string.
    (function() {
        let queryParams = {};
        if (window.location.search.length > 0) {
            let searchString = window.location.search.substring(1);
            let groups = searchString.split("&");
            for (let i = 0; i < groups.length; ++i) {
                let pair = groups[i].split("=");
                queryParams[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
            }
        }
        if (queryParams.mode) {
            modeSelect.value = queryParams.mode;
            cm.setOption("mode", queryParams.mode);
        }
        if (queryParams.content)
            cm.setValue(queryParams.content);
    })();
    </script>
</body>
</html>