<!--
  -   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";

  interface Props {
    open?: boolean;
  }

  let { open = $bindable(false) }: Props = $props();
    const dispatch = createEventDispatcher();

    let errorOpen = $state(false);
    let error: any = $state(undefined);

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

    let canSubmit = $derived(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} >
                {#snippet children({ props })}
                <input type="datetime-local" {...props} bind:value={start}/>
                            {/snippet}
            </Input>
        </div>
        <div class="w-2/3 m-2">
            <Label for="event-create-start">End</Label>
            <Input id="event-create-start" bind:value={end} >
                {#snippet children({ props })}
                <input type="datetime-local" {...props} bind:value={end}/>
                            {/snippet}
            </Input>
        </div>
    </div>
    {#snippet footer()}
  
          <Button color="alternative" onclick={() => open = false} class="mr-auto">Cancel</Button>
          <Button onclick={createEvent} disabled={!canSubmit}>Create</Button>
      
  {/snippet}
</Modal>

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