<!-- 
@component
The header of the start page

Props:
    - `startOver` (function) - The function for starting over
    - `page` (`"auth" | "year" | "events" | "action" | "link"`) - The current page
    - `user` (`StartUser`) - The user
    - `year` (`number`) - The year
    - `event` (`StartEvent`) - The event
-->
<script lang="ts">
    import { slide } from "svelte/transition";
	import { ArrowDownIcon, ArrowLeftIcon } from "phosphor-svelte";

    import * as Card from "$lib/components/ui/card";
	import Logo from "../generic/Logo.svelte";
	import Button from "../ui/button/button.svelte";
	import Separator from "../ui/separator/separator.svelte";
	import Progress from "../ui/progress/progress.svelte";
	import type { StartEvent, StartUser } from "../../../routes/start/+page.svelte";

    
    interface Props {
        startOver: () => void;
        page: "auth" | "year" | "events" | "action" | "link";
        user: StartUser;
        year: number;
        event: StartEvent;
    }
    let { startOver, page, user, year, event }: Props = $props();

    let details: boolean = $state(false);
    let progress: number = $state(1);

    $effect(() => {
        switch (page) {
            case "auth":
                progress = 1;
                break;
            case "year":
                progress = 2;
                break;
            case "events":
                progress = 3;
                break;
            case "action":
                progress = 4;
                break;
            case "link":
                progress = 4;
                break;
            default:
                progress = 1;
        }
    });
</script>

<Card.Card class="w-auto">
    <Card.Content>
        <div class="flex flex-col gap-2">
            <div class="flex flex-row gap-4 items-center">
                
                <div class="flex flex-col gap-2">
                    <div class="flex flex-row gap-4 items-center">
                        <Logo text={false} style="tiny" href="/"/>
                        <p class="text-lg font-bold font-mono text-left">Open <br>Scouting</p>
                    </div>
                    <Button onclick={() => startOver()} class="max-w-fill" variant="ghost" disabled={progress == 1}><ArrowLeftIcon weight="bold" /> Start Over</Button>
                </div>

                <Separator orientation="vertical" class="min-h-16" />

                <div class="flex flex-col gap-2">
                    <p class="text-md">Step <strong>{progress} of 4</strong></p>
                    <Progress value={progress} max={4} />
                    <Button onclick={() => details = !details} class="max-w-fit" variant="ghost">
                        <div class="flex items-center">
                            <ArrowDownIcon weight="bold" class="transform transition-transform duration-200 ease-in-out {details ? 'rotate-180' : 'rotate-0'}" />
                        </div>
                        Details
                    </Button>
                </div>
            </div>

            {#if details}
                <div class="flex flex-col gap-2 text-left" transition:slide>
                    <div class="flex flex-row gap-4 items-center">
                        <p class="text-lg text-muted-foreground">Details</p>
                        <Separator orientation="horizontal" class="!w-3/4"/>
                    </div>
                    <div class="flex flex-row gap-2">
                        <p>User: </p>
                        <p class="font-bold">{user.username}</p>
                        <p class="font-mono">{user.team_number}</p>
                        {#if user.uuid}
                            <p class="text-sm text-muted-foreground">Authenticated</p>
                        {:else}
                            <p class="text-sm text-muted-foreground">Not Authenticated</p>
                        {/if}
                    </div>
                    <p>Year: {year}</p>
                    <div class="flex flex-row gap-2">
                        <p>Event: </p>
                        <p class="font-bold">{event.name}</p>
                        <p class="font-mono">{event.event_code}</p>
                    </div>
                </div>
            {/if}
        </div>
    </Card.Content>
</Card.Card>