<script lang="ts">
    import type { EventFight, ResponseGroups } from "@components/types/event";
    import EventCardOutline from "./EventCardOutline.svelte";
    import EventTeamChip from "./EventTeamChip.svelte";
    import { fightConnector } from "./connections.svelte.ts";

    let {
        fight,
        group,
    }: {
        fight: EventFight;
        group: ResponseGroups;
    } = $props();

    function getScore(group: ResponseGroups, fight: EventFight, blueTeam: boolean): string {
        if (!fight.hasFinished) return "-";

        if (fight.ergebnis === 1) {
            return blueTeam ? group.pointsPerWin.toString() : group.pointsPerLoss.toString();
        } else if (fight.ergebnis === 2) {
            return blueTeam ? group.pointsPerLoss.toString() : group.pointsPerWin.toString();
        } else {
            return group.pointsPerDraw.toString();
        }
    }
</script>

<EventCardOutline>
    <EventTeamChip
        team={{
            id: -1,
            kuerzel: new Date(fight.start).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
            name: new Date(fight.start).toLocaleDateString([]),
            color: "-1",
        }}
        time={true}
    />
    <div id={"fight-" + fight.id}>
        <EventTeamChip team={fight.blueTeam} score={getScore(group, fight, true)} showWinner={true} isWinner={fight.ergebnis === 1} noWinner={fight.ergebnis === 0} id="fight-{fight.id}-team-blue" />
        <EventTeamChip team={fight.redTeam} score={getScore(group, fight, false)} showWinner={true} isWinner={fight.ergebnis === 2} noWinner={fight.ergebnis === 0} id="fight-{fight.id}-team-red" />
    </div>
</EventCardOutline>
