<template>
    <div v-if="authUser">
        <div class="flex m-4">
            <div class="avatar mr-2">
                <Avatar :avatar="authUser.data.attributes.avatar" size="6xl" :alt="authUser.data.attributes.name" class="w-24 h-24" />
            </div>
            <div class="flex flex-col justify-center ml-2">
                <div><strong>{{ authUser.data.attributes.name }}</strong></div>
                <div><strong>{{ authUser.data.attributes.email }}</strong></div>
            </div>
        </div>
        <div v-if="authUser.data.attributes.is_admin">
            <div class="box-toggle">
                <div class="box-toggle-header"  @click="userAddToggle = !userAddToggle">
                    <h2 class="mb-1">Ajouter un membre</h2>
                    <svg-vue icon="arrow" v-bind:class="{ open: userAddToggle }" />
                </div>
                <transition name="fade">
                  <form @submit.prevent="addMember" v-if="userAddToggle"  class="box-toggle-content" >
                      <AlertBox v-if="alertType" :type="alertType" :message="alertMessage" class="mb-1" />
                      <div class="flex mb-2">
                          <InputField name="name" label="Nom du nouveau membre" placeholder="Nom" required :errors="errors" @update:field="form.name = $event" class="mr-1" />
                          <InputField name="email" type="email" label="Adresse email du nouveau membre" placeholder="E-mail" required :errors="errors" @update:field="form.email = $event" class="mr-1" />
                          <div class="flex items-end mb-2">
                              <button class="btn-primary">Ajouter</button>
                          </div>
                      </div>
                  </form>
                </transition>
            </div>
            <div class="mb-2 box-toggle">
                <div class="box-toggle-header"  @click="userListToggle = !userListToggle">
                    <h2>Liste des utilisateurs</h2>
                    <svg-vue icon="arrow" v-bind:class="{ open: userListToggle }" />
                </div>
                <transition name="fade">
                <ul v-if="userListToggle"  class="box-toggle-content">
                    <Loader v-if="loading" />
                    <li v-else v-for="(user, index) in users" :key="index">
                        <router-link :to="'/users/' + user.data.user_id">{{ user.data.attributes.name }}</router-link> - {{ user.data.attributes.email }} - {{ user.data.attributes.last_login }} | {{ user.data.attributes.is_admin }}
                    </li>
                </ul>
                </transition>
            </div>
            <div>Css Testeur pour constituer un thème : <router-link to="/css-testeur">Css Testeur</router-link></div>
        </div>
    </div>
</template>

<script>
import {mapGetters} from 'vuex'
import Avatar from '../../components/Avatar'
import AlertBox from '../../components/AlertBox'
import InputField from '../../components/InputField'
import Loader from '../../components/Loader'

export default {
    name: 'UserAdmin',
    components: {
        Avatar, AlertBox, InputField, Loader
    },
    data: function () {
        return {
            form: {
                name: '',
                email: '',
            },
            alertType: '',
            alertMessage: '',
            errors: null,
            loading: true,
            users: null,
            userListToggle: false,
            userAddToggle: false,
        }
    },
    computed: {
        ...mapGetters({
            authUser: 'authUser',
        })
    },
    mounted() {
        // eslint-disable-next-line no-undef
        axios.get('/api/users')
            .then(response => {
                this.users = response.data.data
                this.loading = false
            })
            .catch(error => {
                this.loading = false
                console.log('Unable to fetch users.' + error)
            })
    },
    methods: {
        addMember: function () {
            // eslint-disable-next-line no-undef
            axios.post('/api/users', {name: this.form.name, email: this.form.email})
                .then(res => {
                    this.form.name = ''
                    this.form.email = ''
                    this.alertType = 'success'
                    this.alertMessage = `${res.data.data.attributes.name} a bien été créé`
                })
                .catch(errors => {
                    this.errors = errors.response.data.errors
                })
        }
    }
}
</script>
