<template>
    <div>
        <h2>Mitglieder</h2>
        <div class="newmember">
            <div class="toggle-new-member"><span @click="toggleNewMember"><span class="add">{{ memberFormIsOpen ? '-' :
                        '+' }}</span>{{ memberToEdit === null ? "Neues Mitglied" : "Mitglied bearbeiten" }}</span>
                <button v-if="memberToEdit !== null" @click="resetToNewMember">Neues Mitglied anlegen</button></div>
            <div v-if="memberFormIsOpen" class="new-member-form">
                <label><span>Vorname:</span> <input type="text" v-model="newFirstname"></label>
                <label><span>Nachname:</span> <input type="text" v-model="newLastname"></label>
                <label><span>Straße:</span> <input type="text" v-model="newStreet"></label>
                <label><span>Ort:</span> <input type="text" v-model="newCity"></label>
                <label><span>Geburtsdatum:</span> <input type="date" v-model="newBirthdate"></label>
                <label><span>Telefon-Nr.:</span> <input type="text" v-model="newPhone"></label>
                <label><span>Email-Adresse:</span> <input type="email" v-model="newEmail"></label>
                <div>
                    <button @click="addNewMember">Anlegen</button>
                    <button @click="resetNewMember" v-if="memberToEdit === null">Felder leeren</button>
                </div>
            </div>
        </div>
        <div>
            <table>
                <thead>
                    <tr>
                        <th>Name, Vorname</th>
                        <th>Adresse</th>
                        <th>Geburtsdatum</th>
                        <th>Telefon-Nr.</th>
                        <th>Email-Adresse</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="member in members" :key="member.id" @click="editMember(member)">
                        <td>{{ member.lastName }}, {{ member.firstName }}</td>
                        <td>{{ member.street }}, {{ member.city }}</td>
                        <td>{{ member.birthDate }}</td>
                        <td>{{ member.phone }}</td>
                        <td>{{ member.email }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

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

export default {
    name: 'MembersView',
    computed: {
        ...mapGetters(['isAuthenticated', 'currentClub']),
    },
    data() {
        return {
            members: [],
            memberFormIsOpen: false,
            newFirstname: '',
            newLastname: '',
            newStreet: '',
            newCity: '',
            newBirthdate: '01.01.2010',
            newEmail: '',
            memberToEdit: null
        }
    },
    async mounted() {
        await this.init();
    },
    methods: {
        async init() {
            const response = await apiClient.get(`/clubmembers/${this.currentClub}`);
            this.members = response.data;
        },
        toggleNewMember() {
            this.memberFormIsOpen = !this.memberFormIsOpen;
        },
        resetNewMember() {
            this.newFirstname = '';
            this.newLastname = '';
            this.newStreet = '';
            this.newCity = '';
            this.newBirthdate = '01.01.2010';
            this.newPhone = '';
            this.newEmail = '';
        },
        async addNewMember() {
            const response = await apiClient.post(`/clubmembers/${this.currentClub}`, {
                firstname: this.newFirstname,
                lastname: this.newLastname,
                street: this.newStreet,
                city: this.newCity,
                birthdate: this.newBirthdate,
                phone: this.newPhone,
                email: this.newEmail,
                id: this.memberToEdit ? this.memberToEdit.id : null,
            });
            this.members = response.data;
            this.resetNewMember();
            this.memberFormIsOpen = false;
        },
        async editMember(member) {
            this.memberToEdit = member;
            this.memberFormIsOpen = true;
            this.newFirstname = member.firstName;
            this.newLastname = member.lastName;
            this.newStreet = member.street;
            this.newCity = member.city;
            this.newPhone = member.phone;
            this.newEmail = member.email;
        },
        resetToNewMember() {
            this.memberToEdit = null;
            this.newFirstname = '';
            this.newLastname = '';
            this.newStreet = '';
            this.newCity = '';
            this.newBirthdate = '01.01.2010';
            this.newPhone = '';
            this.newEmail = '';
        }
    }
}
</script>

<style scoped>
table {
    border-collapse: collapse;
}

thead > tr> th {
    border-bottom: 1px solid #000;
}

table th,
table td {
    padding-right: 2em;
}

table td {
    cursor: pointer;
}

.toggle-new-member {
    cursor: pointer;
    font-weight: bold;
}

.add {
    border: 1px solid #999;
    margin: 0 6px 4px 0;
    border-radius: 50%;
    height: 15px;
    width: 15px;
    display: inline-block;
    line-height: 15px;
    text-align: center;
    box-shadow: 2px 2px 2px #bbb;
}

.newmember {
    border: 1px solid #999;
    margin-bottom: 2em;
}
.new-member-form {
    display: flex;
    flex-direction: column;
}
.new-member-form > label > span {
    width: 10em;
    display: inline-block;
}
</style>