<template>
    <div class="profile">
        <page-title pagetitle="Profil"/>
        <div class="profile-top-area" >
            <avatar size=250 :pathToImage="this.profile.avatar" :username="this.profile.login"/>
            <div>
                <p class="profile-login">{{profile.login}}</p>
                <p class="profile-mail">{{profile.mail}}</p>
            </div>
            
        </div>
        <div class="profile-bottom-area">
            <div class="profile-name">
                <p class="profile-label">Prénom</p>
                <p>{{profile.firstname}}</p>
            </div>
            
            <div class="profile-name">
                <p class="profile-label">Nom</p>
                <p>{{profile.lastname}}</p>
            </div>
        </div>
        
        
        <form action="/">
                
            <div class="submit-buttons">
                <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/UserModel.js'
// @ is an alias to /src


export default {
  name: 'profile',
  props: {
    id: {type: Number}
  },
  components: {
    PageTitle,
    Avatar,
    SvgButton
  },
  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 (){
        fetch(this.$apiRoot+'/user/'+this.$route.params.id, {method: 'GET'})
        .then(response => response.json())
        .then(user => {
            let userJson = user[0];
            let userObj = new User(userJson.ID_USER, userJson.ID_ROLE, userJson.LOGIN, userJson.AVATAR, userJson.LASTNAME, userJson.FIRSTNAME, userJson.MAIL);
            console.log(userObj);
            console.log(this.profile);
            let props = Object.getOwnPropertyNames(userObj);
            let areIdentical = true;


            for (let i = 0; i < props.length; i++) {
                let propName = props[i];

                // If values of same property are not equal,
                // objects are not equivalent
                if (userObj[propName] !== this.profile[propName]) {
                    areIdentical = false;
                }
            }

            if(areIdentical){
                return;
            }
            else{
                console.log("svp")
                this.profile=userObj
            }
        })
        
    }
  },
  computed :{
  },
  data () {
    return {
        user: new User(0, 0, '', '', '', '', ''),
        token: '',
        profile: new User(0, 0, '', '', '', '', ''),
    }
  },

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

  updated() {
      console.log("aidez moi")
      this.getProfileInfo();
  }
}
</script>

<style>
.profile *{
    justify-content: center;
}

.profile{
    color: white;
    width: 80%;
    margin: 100px auto;
}


.profile-top-area, .bottom-area{
    display: flex;
    text-align: left;
}

.profile-top-area .profile-login{
    font-family: Shojumaru;
    font-style: normal;
    font-weight: normal;
    font-size: 96px;
    line-height: 127px;
    margin: 0 40px
}

.profile-top-area .profile-mail{
    font-style: normal;
    font-weight: normal;
    font-size: 36px;
    line-height: 127px;
    margin: 0 40px
}

.profile-bottom-area{
    display: flex;
    justify-content: center;
    margin: 60px 100px 0 100px
}

.profile-bottom-area .profile-label{
    color: black;
    font-weight: bold;
}

.profile-name{
    width: 100%;
    display: flex;
    font-size: 36px;
    justify-content: space-around;
    text-align: right;
    
}


</style>
