<script lang="ts">
    import {EditOutline, InboxSolid, TrashBinOutline} from "flowbite-svelte-icons";
    import {Button, Checkbox, Modal, Toolbar, ToolbarButton} from "flowbite-svelte";
    import type {EventFight, ExtendedEvent} from "../../../types/event.js";
    import FightEditModal from "./modals/FightEditModal.svelte";
    import {createEventDispatcher, onMount} from "svelte";
    import {fightRepo} from "../../../repo/repo.js";
    import {isWide} from "../../../stores/stores.js";

    export let fight: EventFight;
    export let data: ExtendedEvent;
    export let i: number;
    export let selected: boolean = false;
    export let hideEdit: boolean = false;

    let deleteOpen = false;
    let editOpen = false;

    let dispatcher = createEventDispatcher();

    function dispatchSelect() {
        setTimeout(() => {
            if (!deleteOpen && !editOpen) {
                dispatcher('select');
            }
        }, 1);
    }

    async function deleteFight() {
        await $fightRepo.deleteFight(fight.id);
        dispatcher('update');
    }
</script>

<div class="flex h-16 {i % 2 === 0 ? 'bg-gray-800' : ''} mx-4 mt-6 rounded border {selected ? 'border-orange-700' : 'border-gray-700'} p-2 hover:bg-gray-700 transition justify-between shadow-lg cursor-pointer"
    on:click={dispatchSelect} on:keypress={dispatchSelect} role="checkbox" aria-checked={selected} tabindex="0"
>
    <div class="flex">
        <div class="flex flex-col">
            <div>
                <span>{$isWide ? fight.blueTeam.name : fight.blueTeam.kuerzel}</span>
                vs.
                <span>{$isWide ? fight.redTeam.name : fight.redTeam.kuerzel}</span>
            </div>
            {#if (fight.ergebnis === 3)}
                <span class="ml-2">Unentschieden</span>
            {:else if (fight.ergebnis !== 0)}
                <span class="ml-2">{fight.ergebnis === 1 ? 'Sieger: ' + ($isWide ? fight.blueTeam.name : fight.blueTeam.kuerzel) : 'Sieger: ' + ($isWide ? fight.redTeam.name : fight.redTeam.kuerzel)}</span>
            {:else}
                <span class="ml-2">{$isWide ? 'Noch nicht gespielt' : 'kommend'}</span>
            {/if}
        </div>
    </div>
    <div class="flex">
        <div class="mr-2 flex flex-col">
            <span>
                {new Intl.DateTimeFormat(Intl.Locale.name, {
                    hour: '2-digit',
                    minute: '2-digit',
                    second: '2-digit'
                }).format(fight.start)}
            </span>
            <span>
                {new Intl.DateTimeFormat(Intl.Locale.name, {
                    day: '2-digit',
                    month: '2-digit',
                    year: '2-digit'
                }).format(fight.start)}
            </span>
        </div>
        {#if !hideEdit}
            <Toolbar embedded>
                <ToolbarButton on:click={() => editOpen = true}>
                    <EditOutline/>
                </ToolbarButton>
                <ToolbarButton color="red" on:click={() => deleteOpen = true}>
                    <TrashBinOutline />
                </ToolbarButton>
            </Toolbar>
        {/if}
    </div>
</div>

<Modal title="Delete {fight.blueTeam.name} vs. {fight.redTeam.name}" bind:open={deleteOpen} autoclose outsideclose size="xs">
    <div class="text-center">
        <p class="mb-5">
            Are you sure you want to delete this fight?
        </p>
        <Button color="red" on:click={deleteFight}>Delete Fight</Button>
        <Button color="alternative">Cancel</Button>
    </div>
</Modal>

{#if (editOpen)}
    <FightEditModal {fight} bind:data bind:open={editOpen} on:update/>
{/if}
