<!--
  -   This file is a part of the SteamWar software.
  -
  -   Copyright (C) 2023 SteamWar.de-Serverteam
  -
  -   This program is free software: you can redistribute it and/or modify
  -   it under the terms of the GNU Affero General Public License as published by
  -   the Free Software Foundation, either version 3 of the License, or
  -   (at your option) any later version.
  -
  -   This program is distributed in the hope that it will be useful,
  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  -   GNU Affero General Public License for more details.
  -
  -   You should have received a copy of the GNU Affero General Public License
  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  -->

<script lang="ts">
    import {Spinner, Toolbar, ToolbarButton, ToolbarGroup} from "flowbite-svelte";
    import {json} from "@codemirror/lang-json";
    import CodeMirror from "svelte-codemirror-editor";
    import {base64ToBytes} from "../../util.ts";
    import type {Page} from "@type/page.ts";
    import {materialDark} from "@ddietr/codemirror-themes/material-dark.js";
    import {createEventDispatcher} from "svelte";
    import MDEMarkdownEditor from "./MDEMarkdownEditor.svelte";
    import {pageRepo} from "@repo/page.ts";

    export let pageId: number;
    export let branch: string;
    export let dirty: boolean = false;

    let dispatcher = createEventDispatcher();

    $: pageFuture = $pageRepo.getPage(pageId, branch).then(getPage);
    let pageContent = "";
    let page: Page | null = null;

    function getPage(value: Page): Page {
        page = value;

        if (!dirty || confirm("You have unchanged Changes! Discard them? ")) {
            navigator.clipboard.writeText(pageContent);
            dirty = false;
            pageContent = new TextDecoder().decode(base64ToBytes(value.content));
        }

        return value;
    }

    function savePage() {
        let message = window.prompt("Commit message:", "Update " + page!.name);
        if (message) {
            $pageRepo.updatePage(pageId, pageContent, page!.sha, message, branch);
            dirty = false;
        }
    }

    async function deletePage() {
        let message = window.prompt("Commit message:", "Delete " + page!.name);
        if (message) {
            await $pageRepo.deletePage(pageId, message, page!.sha, branch);
            dirty = false;
            dispatcher("reload");
        }
    }
</script>
<svelte:window on:beforeunload={() => {
    if (dirty) {
        return "You have unsaved changes. Are you sure you want to leave?";
    }
}}/>
{#await pageFuture}
    <Spinner/>
{:then p}
    <div>
        <div>
            <Toolbar class="!bg-gray-900">
                <ToolbarGroup slot="end">
                    <ToolbarButton on:click={deletePage}>
                        Delete
                    </ToolbarButton>
                    <ToolbarButton color="primary" on:click={savePage}>
                        Save
                    </ToolbarButton>
                </ToolbarGroup>
            </Toolbar>
        </div>
        {#if page?.name.endsWith("md")}
            <MDEMarkdownEditor bind:value={pageContent} bind:dirty/>
        {:else}
            <CodeMirror bind:value={pageContent} lang={json()} theme={materialDark} on:change={() => dirty = true}/>
        {/if}
    </div>
{:catch error}
    <p>{error.message}</p>
{/await}