<template>
    <div class="profile">
        <page-title pagetitle="Profil"/>
        <div class="avatar-area" >
            <avatar size=250 :avatar="this.profile.avatar" :username="this.profile.login"/>
            <svg-button v-if="editable" id="edit-avatar-button" svg="icons/edit.svg"/>
        </div>
        <div class="login-area">
            <p>{{profile.login}}</p>
            <svg-button v-if="editable" id="edit-login-button" svg="icons/edit.svg"/>
        </div>
        <div class="mail-area">
            <p>{{profile.mail}}</p>
            <svg-button v-if="editable" id="edit-mail-button" svg="icons/edit.svg"/>
        </div>
        <div class="firstname-area">
            <p class="label">Prénom</p>
            <p>{{profile.firstname}}</p>
            <svg-button v-if="editable" id="edit-firstname-button" svg="icons/edit.svg"/>
        </div>
        
        <div class="lastname-area">
            <p class="label">Nom</p>
            <p>{{profile.lastname}}</p>
            <svg-button v-if="editable" id="edit-lastname-button" svg="icons/edit.svg"/>
        </div>
        
        <form class="password-area" v-if="editable">
            <pwd-input id="password1" label="Nouveau mot de passe"/>
            <pwd-input id="password2" label="Confirmer"/>
                
            <div class="submit-buttons">
                <svg-button id="validate" svg="/icons/validate.svg"/>
                <svg-button id="back" svg="/icons/back.svg"/>
            </div> 
        </form>
        
      

  </div>
</template>

<script>
import Avatar from '../components/Avatar.vue';
import PageTitle from '../components/PageTitle.vue';
import SvgButton from '../components/SvgButton.vue';
import User from '@/model/user.js'
import PwdInput from '../components/form/PwdInput.vue';
// @ is an alias to /src


export default {
  name: 'profile',
  props: {
    id: {type: Number}
  },
  components: {
    PageTitle,
    Avatar,
    SvgButton,
    PwdInput
  },
  methods: {
    getUserInfo: async function(){
      let userJson = JSON.parse(localStorage.getItem('user'));
      let user = new User(userJson.id_user, userJson.id_role, userJson.login, userJson.avatar, userJson.lastname, userJson.firstname, userJson.mail);
      let token = userJson.jwt_token;
      this.user = user;
      this.token = token;
    },
    getProfileInfo: async function (){
        const head = new Headers();
        head.append('Authorization', this.token);
        await fetch(this.$apiRoot+'/user/'+this.$route.params.id, {method: 'GET'})
        .then(res => res.json())
        .then(json => {
            let userJson = json[0];
            let userObj = new User(userJson.ID_USER, userJson.ID_ROLE, userJson.LOGIN, userJson.AVATAR, userJson.LASTNAME, userJson.FIRSTNAME, userJson.MAIL);
            this.profile=userObj;
            
        }).catch( (err) => console.log(err));
    }
  },
  computed :{
      editable () {
          return this.user.id_user == this.$route.params.id || this.user.id_role == 2
      }
  },
  data () {
    return {
        dataLoaded: false,    
        user: new User(0, 0, '', '', '', '', ''),
        token: '',
        profile: new User(0, 0, '', '', '', '', ''),
    }
  },

  mounted () {
      this.getUserInfo();
      this.getProfileInfo();
  },

  beforeUpdate() {
      this.getProfileInfo();
  }
}
</script>

<style>

</style>
