<!DOCTYPE html>
<html>
<head>
    <title>JSFormatter Tool</title>
    <link rel="stylesheet" href="../../UserInterface/External/CodeMirror/codemirror.css">
    <link rel="stylesheet" href="codemirror-additions.css">
    <script src="../../UserInterface/External/CodeMirror/codemirror.js"></script>
    <script src="../../UserInterface/External/CodeMirror/javascript.js"></script>

    <script src="../../UserInterface/External/Esprima/esprima.js"></script>
    <script src="../../UserInterface/Workers/Formatter/FormatterContentBuilder.js"></script>
    <script src="../../UserInterface/Workers/Formatter/FormatterUtilities.js"></script>
    <script src="../../UserInterface/Workers/Formatter/ESTreeWalker.js"></script>
    <script src="../../UserInterface/Workers/Formatter/JSFormatter.js"></script>
    <script src="JSFormatterDebug.js"></script>
</head>
<body>
    <h1>Debug JSFormatter</h1>

    <!-- Controls -->
    <button id="populate">Populate</button>
    <select id="load-individual-test"><option>-- Load Test --</option></select>
    <small>
        <label><input id="program" type="radio" name="program-or-module"> Program</label>
        <label><input id="module" type="radio" name="program-or-module" checked> Module</label>
    </small>
    <button id="run-tests">Run All Tests</button>
    <button id="clear">Clear</button>
    <button id="select-output">Select Output</button>
    <button id="run-again">Run Again</button>
    <button id="save-as-url">Save URL</button>
    <small id="time"></small>
    <br><br>

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

    <!-- Output -->
    <pre id="pretty"></pre>
    <pre id="debug"></pre>

    <script>
    const testURLPrefix = "../../../../LayoutTests/inspector/formatting/resources/javascript-tests/";

    let tests = [
        "if-statement.js",
        "import.js",
        "for-statements.js",
        "while-statement.js",
        "do-while-statement.js",
        "try-catch-finally-statements.js",
        "switch-case-default.js",
        "object-array-literal.js",
        "unary-binary-expressions.js",
        "logic-expressions.js",
        "ternary-expressions.js",
        "new-expression.js",
        "numbers.js",
        "label-break-continue-block.js",
        "with-statement.js",
        "return-statement.js",
        "other-statements.js",
        "variable-declaration.js",
        "functions.js",
        "classes.js",
        "arrow-functions.js",
        "generators.js",
        "comments-and-preserve-newlines.js",
        "comments-only.js",
        "template-strings.js",
        "sample-webinspector-object.js",
        "sample-normal-utilities.js",
        "sample-jquery.js",
        "modules.js",
    ];

    // Initial values from URL.
    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]);
        }
    }

    // Initial content.
    let content = "(function(){let a=1;return a+1;})();";
    if (queryParams.content)
        content = queryParams.content || "";
    if (queryParams.program)
        document.getElementById("program").checked = true;

    // Setup CodeMirror.
    let cm = CodeMirror.fromTextArea(document.getElementById("code"), {lineNumbers: true});
    cm.setValue(content);
    cm.setOption("mode", "text/javascript");

    // Populate button to populate with some canned content.
    document.getElementById("populate").addEventListener("click", function(event) {
        loadIndividualTest("sample-jquery.js");
    });

    // Fill the individual tests button.
    let testSelectElement = document.getElementById("load-individual-test");
    testSelectElement.addEventListener("change", function(event) {
        let selectedOption = testSelectElement.selectedOptions[0];
        let test = selectedOption.value;
        loadIndividualTest(test);
        testSelectElement.selectedIndex = 0;
    });

    // Load up the known tests.
    for (let test of tests) {
        let option = testSelectElement.appendChild(document.createElement("option"));
        option.textContent = test;
        option.value = test;
    }

    // Program / Module checkboxes.
    let programCheckbox = document.getElementById("program");
    let moduleCheckbox = document.getElementById("module");
    programCheckbox.addEventListener("change", refresh);
    moduleCheckbox.addEventListener("change", refresh);

    // Run Tests button.
    document.getElementById("run-tests").addEventListener("click", function(event) {
        cm.setValue("/* Running Tests... */");
        refresh();
        runAllTests();
    });

    // Clear button.
    document.getElementById("clear").addEventListener("click", function(event) {
        cm.setValue("");
        refresh();
    });

    // Select output button.
    document.getElementById("select-output").addEventListener("click", function(event) {
        let range = document.createRange();
        range.selectNodeContents(document.getElementById("pretty"));
        let selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
    });

    // Run again button.
    document.getElementById("run-again").addEventListener("click", function(event) {
        refresh();
    });

    // Save as URL button.
    document.getElementById("save-as-url").addEventListener("click", function(event) {
        let content = cm.getValue();
        let queryString = "?content=" + window.encodeURIComponent(content);
        if (programCheckbox.checked)
            queryString += "&program";
        window.location.search = queryString;
    });

    // Refresh after changes after a short delay.
    let timer = null;
    cm.on("change", function(codeMirror, change) {
        if (timer)
            clearTimeout(timer)
        timer = setTimeout(function() {
            clearTimeout(timer);
            timer = null;
            refresh();
        }, 500);
    });

    // Output elements.
    let timeOutput = document.getElementById("time");
    let prettyPre = document.getElementById("pretty");
    let debugPre = document.getElementById("debug");

    // Current value of checkboxes.
    function currentSourceType() {
        if (programCheckbox.checked)
            return JSFormatter.SourceType.Script;
        if (moduleCheckbox.checked)
            return JSFormatter.SourceType.Module;
        console.assert(false, "Program or Module radio button should be checked");
        return undefined;
    }

    function refresh() {
        if (timer)
            clearTimeout(timer);

        // Time the formatter.
        let startTime = Date.now();
        let formatter = new JSFormatter(cm.getValue(), currentSourceType());
        let endTime = Date.now();

        // Show debug info.
        let debugText;
        try {
            let debugFormatter = new JSFormatterDebug(cm.getValue(), currentSourceType());
            debugText = debugFormatter.debugText;
        } catch (error) {
            debugText = "Parse error: " + JSON.stringify(error, null, 2);
        }

        // Output the results.
        timeOutput.innerText = (endTime - startTime) + "ms";
        prettyPre.innerText = formatter.formattedText;
        debugPre.innerText = debugText;
    }

    setTimeout(refresh);

    // Testing.

    function isModuleTest(test) {
        return test === "modules.js";
    }

    function loadIndividualTest(test) {
        let testURL = testURLPrefix + test;
        let xhr = new XMLHttpRequest;
        xhr.open("GET", testURL, true);
        xhr.onload = () => { cm.setValue(xhr.responseText); setTimeout(refresh); }
        xhr.send();

        if (isModuleTest(test))
            moduleCheckbox.checked = true;
        else
            programCheckbox.checked = true;
    }

    function runAllTests() {
        let index = -1;
        let results = [];
        setTimeout(runNextTest, 0);

        function runNextTest() {
            // Next test.
            index++;

            // Done.
            if (index >= tests.length) {
                printResults();
                return;
            }

            // Load test and expected results.
            let test = tests[index];
            let testURL = testURLPrefix + test;
            let expectedURL = testURL.replace(/\.([^\.]+)$/, "-expected.$1");
            let xhr1 = new XMLHttpRequest;
            xhr1.open("GET", testURL, false);
            xhr1.send();
            let xhr2 = new XMLHttpRequest;
            xhr2.open("GET", expectedURL, false);
            xhr2.send();
            let testData = xhr1.responseText;
            let expectedData = xhr2.responseText;

            // Run the test.
            let sourceType = isModuleTest(test) ? JSFormatter.SourceType.Module : JSFormatter.SourceType.Script;
            let formatter = new JSFormatter(testData, sourceType);

            // Compare results.
            let pass = formatter.formattedText === expectedData;
            results.push("/* " + (pass ? "PASS" : "!! FAIL") + ": " + test + " */");

            // Output failures to console.
            if (!pass) {
                console.log("Test", test);
                console.log("Formatted Output", formatter.formattedText ? formatter.formattedText.length : null);
                console.log(formatter.formattedText);
                console.log("Expected Output", expectedData.length);
                console.log(expectedData);
            }

            runNextTest();
        }

        function printResults() {
            cm.setValue(results.join("\n"));
            cm.refresh();
        }
    }
    </script>
</body>
</html>