<?php global $system; global $systemCommonName; global $systemID; $title = "Editing " . $systemCommonName; require_once $_SERVER['DOCUMENT_ROOT'] . '/includes/header.php';

function timeAgo($time): string {
    if (!is_numeric($time)) {
        $time = strtotime($time);
    }

    $periods = ["second", "minute", "hour", "day", "week", "month", "year", "age"];
    $lengths = array("60", "60", "24", "7", "4.35", "12", "100");

    $now = time();

    $difference = $now - $time;
    if ($difference <= 10 && $difference >= 0) {
        return $tense = "now";
    } elseif ($difference > 0) {
        $tense = "ago";
    } else {
        $tense = "later";
    }

    for ($j = 0; $difference >= $lengths[$j] && $j < count($lengths)-1; $j++) {
        $difference /= $lengths[$j];
    }

    $difference = round($difference);

    $period =  $periods[$j] . ($difference >1 ? "s" :'');
    return "{$difference} {$period} {$tense}";
}

?>

<br>
<div class="container">
    <?php require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/sysbanner.php"; ?>
    <br>

    <p class="text-muted">
        <span id="editor-save-status">Saved</span> ยท <span id="editor-size"><?= file_exists($_SERVER['DOCUMENT_ROOT'] . "/includes/data/$systemID-disclaimers.html") ? strlen(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/$systemID-disclaimers.html")) : "0" ?></span> bytes
    </p>

    <!--suppress HtmlFormInputWithoutLabel -->
    <textarea id="page-editor">
        <?= file_exists($_SERVER['DOCUMENT_ROOT'] . "/includes/data/$systemID-disclaimers.html") ? file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/$systemID-disclaimers.html") : "" ?>
    </textarea>

    <script src="/assets/editor/editor.js"></script>
    <script>
        let editor;
        ClassicEditor
            .create( document.querySelector( '#page-editor' ), {
                toolbar: [
                    'undo', 'redo', '|', 'removeFormat', '|', 'heading', '|', 'fontSize', 'fontColor', 'fontBackgroundColor', 'alignment', '|', 'bold', 'italic', 'underline', 'strikethrough', '|', 'subscript', 'superscript', '|', 'code', '|', 'outdent', 'indent', '|', 'bulletedList', 'numberedList', '|', 'link', 'imageUpload', 'mediaEmbed', 'blockQuote', 'insertTable', 'codeBlock', '|', 'horizontalLine'
                ]
            } )

            .then( newEditor => {
                editor = newEditor;
            } )
            .catch( error => {
                console.error( error );
            } );
    </script>
    <style>
        :root {
            --ck-color-base-background: transparent;
        }

        .ck-toolbar {
            filter: invert(1);
        }

        .ck-tooltip__text {
            color: white !important;
        }

        .ck-dropdown__panel {
            background: #ddd !important;
        }

        .ck-color-grid__tile {
            filter: invert(1);
        }

        .ck-balloon-rotator {
            background-color: #ccc !important;
        }

        .ck-balloon-panel {
            filter: invert(1);
        }
    </style>
    <script>
        let lastSavedData = editor.getData();
        let lastFetchedData = editor.getData();
        let timeSinceLastModified = 0;
        let saving = false;

        async function save() {
            let data = editor.getData();
            document.getElementById("editor-save-status").innerHTML = "Saving...";
            document.getElementById("editor-save-status").classList.remove("text-danger");
            document.getElementById("editor-save-status").classList.remove("text-muted");
            document.getElementById("editor-save-status").classList.remove("text-warning");
            document.getElementById("editor-save-status").classList.add("text-primary");
            saving = true;

            try {
                await window.fetch("/api/save?system=<?= $systemID ?>&member=null", {
                    method: "POST",
                    body: JSON.stringify({ content: data })
                });
                document.getElementById("editor-save-status").innerHTML = "Saved";
                document.getElementById("editor-save-status").classList.remove("text-danger");
                document.getElementById("editor-save-status").classList.add("text-muted");
                document.getElementById("editor-save-status").classList.remove("text-warning");
                document.getElementById("editor-save-status").classList.remove("text-primary");
                lastSavedData = data;
                saving = false;
            } catch (e) {
                console.error(e);
                document.getElementById("editor-save-status").innerHTML = "Failed to save";
                document.getElementById("editor-save-status").classList.add("text-danger");
                document.getElementById("editor-save-status").classList.remove("text-muted");
                document.getElementById("editor-save-status").classList.remove("text-warning");
                document.getElementById("editor-save-status").classList.remove("text-primary");
            }
        }

        document.onclick = async () => {
            if (saving) return;

            if (editor.getData() !== lastSavedData) {
                await save();
            }
        }

        setInterval(async () => {
            if (saving) return;

            document.getElementById("editor-size").innerHTML = editor.getData().length;

            if (editor.getData() !== lastSavedData) {
                document.getElementById("editor-save-status").innerHTML = "Modified";
                document.getElementById("editor-save-status").classList.remove("text-danger");
                document.getElementById("editor-save-status").classList.remove("text-muted");
                document.getElementById("editor-save-status").classList.add("text-warning");
                document.getElementById("editor-save-status").classList.remove("text-primary");

                if (editor.getData() !== lastFetchedData) {
                    lastFetchedData = editor.getData();
                    timeSinceLastModified = 0;
                } else {
                    timeSinceLastModified++;
                }

                if (timeSinceLastModified > 20) {
                    await save();
                }
            } else {
                timeSinceLastModified = 0;
                document.getElementById("editor-save-status").innerHTML = "Saved";
                document.getElementById("editor-save-status").classList.add("text-muted");
                document.getElementById("editor-save-status").classList.remove("text-warning");
                document.getElementById("editor-save-status").classList.remove("text-primary");
            }
        }, 100)
    </script>
</div>

<?php require_once $_SERVER['DOCUMENT_ROOT'] . '/includes/footer.php'; ?>