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

    let {
        fight,
        group,
        event,
        disabled = false,
    }: {
        fight: EventFight;
        group: ResponseGroups;
        event: ExtendedEvent;
        disabled?: boolean;
    } = $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}
        {event}
    />
    <div id={"fight-" + fight.id}>
        <EventTeamChip
            {event}
            {disabled}
            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
            {event}
            {disabled}
            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>
