<script lang="ts">
    import inventoryApi from "../stores/api";
    import { inventory } from "../stores/inventory";

    export let finishKind = "";

    let windowIsVisible = "";

    export const showWindow = () => windowIsVisible = "is-active";

    const closeWindow = () => {
        windowIsVisible = "";
    };
</script>

<div class="modal {windowIsVisible}">
    <div class="modal-background"/>
        <div class="modal-card">
            {#if finishKind === "reset"}
                <header class="modal-card-head">
                    <p class="modal-card-title">Inventur neu beginnen ❌</p>
                    <button class="delete" aria-label="close" on:click={closeWindow}></button>
                </header>
                <section class="modal-card-body">
                    <p>Bist du dir sicher, dass du die Inventur abbrechen willst? Damit werden alle bereits eingegebenen Werte zurückgesetzt.</p>
                </section>
                <footer class="modal-card-foot">
                    <button class="button is-danger" on:click={inventoryApi.reset}>Ja, Reset!</button>
                    <button class="button" on:click={closeWindow}>Abbrechen</button>
                </footer>
            {:else if finishKind === "finish"}
                <header class="modal-card-head">
                    <p class="modal-card-title">Inventur abschließen ✅</p>
                    <button class="delete" aria-label="close" on:click={closeWindow}></button>
                </header>
                <section class="modal-card-body">
                    <p>
                        Vielen Dank, dass du eine Inventur gemacht hast! 🫶
                        <br>
                        Bitte gib noch deinen <strong>Namen</strong> ein. Außerdem hast du hier noch Platz für irgendwelche <strong>Kommentare</strong> zu deine Inventur.
                    </p>
                </section>
                <footer class="modal-card-foot">
                    <button class="button is-primary" on:click={() => {
                        // TODO: Hier muss dann der Request an das Backend rausgehen!
                        console.log($inventory);
                        closeWindow();
                    }}>Abschließen</button>
                    <button class="button" on:click={closeWindow}>Abbrechen</button>
                </footer>
            {/if}
        </div>
</div>