<template>
  <div>
    <div class="flex mb-4">
      <div class="avatar mr-2">
        <Avatar
          :avatar="authUser.data.attributes.avatar"
          size="large"
          :alt="authUser.data.attributes.name"
        />
      </div>
      <div class="flex-col flex-center">
        <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">
      <h2 class="mb-1">
        Ajouter un membre
      </h2>
      <AlertBox
        v-if="alertType"
        :type="alertType"
        :message="alertMessage"
        class="mb-1"
      />
      <form @submit.prevent="addMember" class="mb-2">
        <InputField
          name="name"
          type="text"
          label="Nom du nouveau membre"
          placeholder="Nom"
          :errors="errors"
          @update:field="form.name = $event"
        />
        <InputField name="email" type="email" label="Adresse email du nouveau membre" placeholder="E-mail" :errors="errors" @update:field="form.email = $event" />
        <button class="btn-primary">Ajouter</button>
      </form>
        <div class="mb-2">
            <h2>Liste des utilisateurs</h2>
            <ul>
                <li v-if="loading">> Loading...</li>
                <li v-else v-for="user in users"><a :href="user.links.self">{{ user.data.attributes.name }}</a> - {{ user.data.attributes.email }} - {{ user.data.attributes.is_admin }}</li>
            </ul>
        </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';

    export default {
        name: 'UserAdmin',
        components: {
            Avatar, AlertBox, InputField,
        },
        data: function () {
            return {
                form: {
                    name: '',
                    email: '',
                },
                alertType: '',
                alertMessage: '',
                errors: null,
                loading: '',
                users: null,
            }
        },
        computed: {
            ...mapGetters({
                authUser: 'authUser',
            })
        },
        mounted() {
            axios.get('/api/users')
                .then(response => {
                    this.users = response.data.data
                    this.loading = false
                })
                .catch(error => {
                    this.loading = false
                    alert('Unable to fetch users.')
                })
        },
        methods: {
            addMember: function () {
                if(this.form.name.length >= 4 && this.form.email.length >= 12) {
                    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.alertType = 'error'
                            this.alertMessage = 'L\'utilisateur n\'a pas été créé'
                        })
                } else {
                    this.alertType = 'error'
                    this.alertMessage = 'Le formulaire n\'est pas correctement renseigné.'
                }
            }
        }
    }
</script>
