<template>
        <h1><br><br>Profilinnstillinger <br></h1>

        <div v-if="hasProfileImage" id = "profilepicture-container">
            <img width="100" :src="this.updatedProfile.upImage" alt="profile picture">
        </div>
        <div v-else id = "profilepicture-container">
            <Icon icon="material-symbols:person" :color=iconColor :style="{ fontSize: '500px'}" />
        </div>

        <h2>{{this.profile.name}}</h2>
        <button  @click="changeProfile" id="changeUserBtn" >Bytt bruker</button>

    <form @submit.prevent="submit">
            <label for="brukernavn">Profilnavn</label><br>
            <input type="text" required v-model="this.updatedProfile.upName"><br>
            <br>
            <h4>Brukertype</h4>
            <input type="radio" id="normal" value="false" name="restrict" v-model="this.updatedProfile.upRestricted">
            <label for="normal"> Standard</label><br>

            <input type="radio" id="restricted" value="true" name="restrict" v-model="this.updatedProfile.upRestricted">
            <label for="restricted"> Begrenset - Kan ikke redigere ukeplan eller handleliste</label><br>

            <br>
            <h3>Profilbilde</h3><br>
            <div id="changeUserImage">
                <div v-if="hasProfileImage" id = "profilepicture-container">
                    <img width="50" :src="this.updatedProfile.upImage" alt="profile picture">
                </div>
                <div v-else id = "profilepicture-container">
                    <Icon icon="material-symbols:person" :color=iconColor :style="{ fontSize: '30px'}" />
                </div>

                <label for="chooseImageUrl">Bilde-URL:</label>
                <input type="text" id="chooseImageUrl" v-model="this.updatedProfile.upImage">

            </div>
        <br><br>
            <div id = "submitbuttonBox">
                <button class="saveBtn" @click=" saveUserSettings">Lagre profilendringer</button>
                <button class="delBtn" @click="deleteProfile">Slett brukerprofil</button>
            </div>

        </form>

</template>

<script>
import {mapState, mapStores} from "pinia";
import {Icon} from "@iconify/vue";
import {API} from "@/util/API";
import { useAuthStore } from "@/stores/authStore";
import router from "../router";
export default {
    name: "EditProfile",
    components: {Icon},
    computed: {

        ...mapState(useAuthStore, ['profile']),
        ...mapStores(useAuthStore),
        updatedProfile() {
          return {
              upName: this.profile.name,
              upRestricted: this.profile.restricted,
              upImage: this.profile.profileImageUrl,
          }
        },
        iconColor() {
            return "#000000"
        },
        hasProfileImage() {
            return this.updatedProfile.upImage.length > 0;
        }
    },
    methods: {
        saveUserSettings(){
            const id = this.profile.id;

            const numOfProfiles = API.getProfiles().length
            if(numOfProfiles===1 && this.updatedProfile.upRestricted===true){
              alert("Du må ha minst en standardprofil per konto. (ingen endringer er gjort)")
            }
            else {
              API.updateProfile(
                  id,{
                    name:this.updatedProfile.upName,
                    profileImageUrl:this.updatedProfile.upImage,
                    restricted:this.updatedProfile.upRestricted,
                  }
              ).then((savedProfile)=>{
                useAuthStore().setProfile(savedProfile);
                alert("profil oppdatert.")
              }).catch((error)=> {
                console.log(error)
              })
            }
        },
        chooseProfilePicture(){
            alert("skriv inn bildelenke i feltet, og oppdater innstillinger")
        },
        changeProfile(){
            router.push("/selectProfile");
        },
      deleteProfile(){
          const numOfProfiles = API.getProfiles().length
          if(numOfProfiles===1){
            alert("Du kan ikke slette profilen. Hver Konto må ha minst en profil")
          }else {
            const id = this.profile.id;
            API.deleteProfile(id).then(()=>{
              router.push('/selectProfile')
            }).catch((error)=> {
              alert("Det oppsto en feil ved sletting profil: " + error)
            })
          }
      }
    }
}

</script>

<style scoped lang="scss">

main {
    background-color: white;
    color:black;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    text-align: left;
    left:0;
}

#profilepicture-container {
    display:flex;
    border-radius:50%;
    width:100px;
    height: 100px;
    background-color: white;
    justify-content: center;
    align-items: center;
    border: 3px solid base.$grey;
}

img {
    border-radius: 50%;
}

#changeUserImage {
    display:flex;
}

#changeUserImage #profilepicture-container {
    width: 50px;
    height: 50px;
}

.infoText {
    background-color: white;
    padding: .5em;
    margin: .4em;
}

form {
    background-color: base.$grey;
    color: black;
    align-content: end;
    padding: 2em;
    margin-top: 2em;
    margin-bottom: 2em;
}

input[type="text"],
input[type="password"]{
    width: 100%;
    padding: .5em;
}
#submitbuttonBox {
    display:flex;
    justify-content: space-between;
}
button {
    background-color: base.$red;
    color: black;

    border: 1px solid black;

    margin: 1em;
}


#changeUserBtn {
    padding:.9em;

}
button:hover{
    background-color: #282828;

}

.saveBtn, .delBtn {
    background-color: base.$green;
    color: white;
    font-weight: bold;
    padding:.9em;
    border:none;
}
.delBtn {
    background-color: darkred;
}

#dangerZone {
    color: darkred;
}

</style>