<template>
    <div>
        <h2>Verein {{ club.name }}</h2>
        <div v-if="accessAllowed">
            <div v-if="openRequests.length > 0">
                <h3>Offene Anfragen auf Zugriff</h3>
                <!-- Hier könntest du die offenen Anfragen anzeigen -->
            </div>
            <div>
                <h3>Mitglieder</h3>
                <ul>
                    <li v-for="member in club.members" :key="member.id">{{ member.lastName }}, {{ member.firstName }}</li>
                </ul>
            </div>
            <div>
                <h3>Trainingstagebuch</h3>
            </div>
        </div>
        <div v-else>
            <div>Für diesen Verein wurde Dir noch kein Zugriff gestattet.</div>
            <button @click="requestAccess">Zugriff beantragen</button>
        </div>
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import apiClient from '../apiClient';

export default {
    name: "ClubView",
    computed: {
        ...mapGetters(['isAuthenticated', 'currentClub', 'clubs']),
    },
    data() {
        return {
            club: {
                name: '',
            },
            openRequests: [],
            accessAllowed: false
        }
    },
    methods: {
        async loadClub() {
            try {
                const response = await apiClient.get(`/clubs/${this.currentClub}`);
                this.club = response.data;
                this.accessAllowed = true;
            } catch (error) {
                console.error("Zugriff auf den Verein nicht gestattet", error);
                this.accessAllowed = false;
            }
        },
        async loadOpenRequests() {
            try {
                const response = await apiClient.get(`/clubmembers/notapproved/${this.currentClub}`);
                this.openRequests = response.data;
            } catch (error) {
                console.error("Fehler beim Laden der offenen Anfragen", error);
            }
        }, 
        async requestAccess() {
            const response = await apiClient.get(`/clubs/request/${this.currentClub}`);
            if (response.status === 200) {
                alert('Zugriff wurde angefragt');
            }
        }
    },
    async mounted() {
        await this.loadClub();
        await this.loadOpenRequests();
    }
}
</script>

<style lang="scss" scoped>
h2 {
    display: block;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
</style>
