<script lang="ts">
    import type { Player } from "./Player";

    interface Props {
        players: Player[];
        currentPlayer: string;
        editable?: boolean;
        onReload?: () => void;
        [key: string]: unknown;
    }

    let { players, currentPlayer, editable = false, onReload = () => {} }: Props = $props();

    let _players = $derived(() => {
        let p = [...players];
        return p.sort((a: Player, b: Player) => b.points - a.points);
    });
</script>

<div
    class="h-full w-fit {editable === true
        ? 'max-w-[600px] min-w-[400px]'
        : 'max-w-[400px] min-w-[300px]'} overflow-hidden border-r-1 border-solid border-gray-300 pr-4 pl-4"
>
    <div class="flex items-center justify-around">
        <h3 class="text-5xl">Scoreboard</h3>
        {#if editable === true}
            <button class="btn w-16" onclick={() => onReload()}>&#x21bb;</button>
        {/if}
    </div>
    <div class="mt-4 text-3xl">
        <table class="w-1/1">
            <tbody>
                {#each _players() as player (player.name)}
                    <tr class="{currentPlayer === player.name ? 'current' : ''} h-12">
                        <td class="pr-4 pl-2">
                            {#if editable === true}
                                <input
                                    class="inputField max-w-[200px]"
                                    type="number"
                                    bind:value={player.points}
                                />
                            {:else}
                                {player.points}
                            {/if}
                        </td>
                        <td class="pe-4 text-end whitespace-nowrap">{player.name}</td>
                    </tr>
                {/each}
            </tbody>
        </table>
    </div>
</div>

<style>
    .current {
        background-color: rgb(166, 255, 165);
    }
</style>
