<template>
    <div>
        <h2>Verein anlegen</h2>
        <label>Name des Vereins: <input type="text" v-model="clubName" /></label>
        <button @click="createClub">Verein anlegen</button>
    </div>
</template>

<script>
import { mapActions } from 'vuex/dist/vuex.cjs.js';
import apiClient from '../apiClient';

export default {
    name: "CreateClubView",
    data() {
        return {
            clubName: '',
        }
    },
    methods: {
        ...mapActions(['setClubs', 'setCurrentClub']),
        async createClub() {
            if (this.clubName.trim().length < 3) {
                alert('Bitte gib dem Verein einen Aussagekräftigen Namen');
                return;
            }
            try {
                const newClub = await apiClient.post('/clubs', { name: this.clubName });
                const clubsResponse = await apiClient.get('/clubs');
                this.setClubs(clubsResponse.data);
                this.setCurrentClub(newClub.data);
            } catch (error) {
                if (error.status === 409) {
                    alert('Der Verein existiert bereits.');
                } else {
                    alert('Ein unbekannter Fehler ist aufgetreten.');
                }
            }
        }
    }
}
</script>