<!--
  -   This file is a part of the SteamWar software.
  -
  -   Copyright (C) 2025 SteamWar.de-Serverteam
  -
  -   This program is free software: you can redistribute it and/or modify
  -   it under the terms of the GNU Affero General Public License as published by
  -   the Free Software Foundation, either version 3 of the License, or
  -   (at your option) any later version.
  -
  -   This program is distributed in the hope that it will be useful,
  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  -   GNU Affero General Public License for more details.
  -
  -   You should have received a copy of the GNU Affero General Public License
  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  -->

<script lang="ts">
    import {permissions} from "@stores/stores.ts";
    import {Select, SelectContent, SelectItem} from "@components/ui/select";
    import {SelectTrigger} from "@components/ui/select/index.js";
    import {permsRepo} from "@repo/perms.ts";

    const {
        perms, uuid
    }: { perms: string[], uuid: string } = $props();

    let value = $state(perms);
    let prevValue = $state(perms);

    function onChange(change: string[]) {
        $permissions.perms.forEach(perm => {
            if (prevValue.includes(perm) && !change.includes(perm)) {
                $permsRepo.removePerm(uuid, perm)
            } else if (!prevValue.includes(perm) && change.includes(perm)) {
                $permsRepo.addPerm(uuid, perm)
            }
        });

        prevValue = change;
        value = change;
    }
</script>

<Select type="multiple" bind:value onValueChange={onChange}>
    <SelectTrigger>
        {value.length} Permissions
    </SelectTrigger>
    <SelectContent>
        {#each $permissions.perms as permission (permission)}
            <SelectItem value={permission}>{permission}</SelectItem>
        {/each}
    </SelectContent>
</Select>