<!--
  -   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 {Button, Input, Label, Modal} from "flowbite-svelte";
    import {createEventDispatcher} from "svelte";
    import ErrorModal from "../../components/ErrorModal.svelte";
    import dayjs from "dayjs";
    import {eventRepo} from "@repo/event.ts";

    export let open = false;
    const dispatch = createEventDispatcher();

    let errorOpen = false;
    let error: any = undefined;

    let eventName = "";
    let start = "";
    $: startDate = dayjs(start);
    let end = "";
    $: endDate = dayjs(end);

    $: canSubmit = eventName.length > 0 && startDate.isValid() && endDate.isValid() && startDate.isBefore(endDate);

    async function createEvent() {
        try {
            await $eventRepo.createEvent({
                name: eventName,
                start: startDate,
                end: endDate
            });
            dispatch("create");
            open = false;
        } catch (e: any) {
            error = e;
            errorOpen = true;
            open = false;
        }
    }

    function clear() {
        eventName = "";
        start = "";
        end = "";
    }
</script>

<Modal bind:open title="Create Event" outsideclose size="sm" on:hide={clear}>
    <div class="flex flex-col place-items-center text-center">
        <div class="w-2/3 m-2">
            <Label for="event-create-name">Event Name</Label>
            <Input id="event-create-name" bind:value={eventName} placeholder="Name..."></Input>
        </div>
        <div class="w-2/3 m-2">
            <Label for="event-create-start">End</Label>
            <Input id="event-create-start" bind:value={start} let:props>
                <input type="datetime-local" {...props} bind:value={start}/>
            </Input>
        </div>
        <div class="w-2/3 m-2">
            <Label for="event-create-start">End</Label>
            <Input id="event-create-start" bind:value={end} let:props>
                <input type="datetime-local" {...props} bind:value={end}/>
            </Input>
        </div>
    </div>
    <svelte:fragment slot="footer">
        <Button color="alternative" on:click={() => open = false} class="mr-auto">Cancel</Button>
        <Button on:click={createEvent} disabled={!canSubmit}>Create</Button>
    </svelte:fragment>
</Modal>

<ErrorModal bind:open={errorOpen} bind:error={error}/>
