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

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

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

        <form @submit.prevent="submit">
            <label for="brukernavn">Profilnavn</label><br>
            <input type="text" required><br>
          <br>
            <h4>Brukertype</h4>
            <input type="radio" id="normal" value="false">
            <label for="normal"> Standard</label><br>

            <input type="radio" id="restricted" value="true" >
            <label for="restricted"> Begrenset - Kan ikke redigere ukeplan eller handleliste</label><br>

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

            <div id = "submitbuttonBox">
                <button class="saveBtn" @click="saveUserSettings" >Lagre brukerinnstillinger</button>
                <button class="delBtn" @click="deleteUser">Slett brukerprofil</button>
            </div>

        </form>

        <h1>App-innstillinger</h1>

        <form @submit.prevent="submit">

            <h2>-Matpreferanser-</h2>
            <p class ="infoText">Hvis huket av, så vil du kun få oppskrifter av disse typene:</p>

            <input type="checkbox" id="vegetar" name="vegetar" value="vegetar">
            <label for="vegetar"> vegetar </label><br>
            <input type="checkbox" id="vegan" name="vegan" value="vegan">
            <label for="vegan"> vegan </label><br>

            <br>

            <h2>-Allergener-</h2>

            <p class ="infoText">Du vil ikke få forslag om oppskrifter med disse varene:</p>

            <input type="checkbox" id="gluten" name="gluten" value="Gluten">
            <label for="allergen"> gluten</label><br>
            <input type="checkbox" id="nøtter" name="nøtter" value="nøtter">
            <label for="allergen"> nøtter</label><br>
            <input type="checkbox" id="melk" name="melk" value="melk">
            <label for="allergen"> melk</label><br>

            <button class="saveBtn" @click="saveFoodPreference">Lagre matpreferanser <br>  og allergener</button>
        </form>

        <h1>Konto-innstillinger</h1>
        <form @submit.prevent="submit">

            <p class="infoText">OBS: Kontakt admin dersom du ønsker å oppdatere epost</p><br>

            <p>Epost:</p>

            <label for="password">Endre passord</label><br>
            <input type="password" id="password" >

            <button class="saveBtn" @click="saveAccountSettings">Lagre kontoinnstillinger</button>

          </form>
          <br>
          <br>
          <hr>

          <form  @submit.prevent="submit" id = "dangerZone">
          <h1>🔺FARESONE🔺</h1>
          <p class="infoText">Ved å trykke på knappen nedenfor, vil du slette din SmartMat-konto</p>
            <input type="checkbox" id="deletionCheckbox" v-model="deletionConfirmation">
            <label for="deletionCheckbox"> Jeg bekrefter jeg skjønner dette, og ønsker å slette kontoen min SmartMat-konto for alltid.</label><br>
            <button class="delBtn" @click="deleteAccount">SLETT KONTO</button>
          </form>

          <br><br><br>
    </main>
</template>
<script setup>




</script>


<script>
import {mapStores} from "pinia";
import {Icon} from "@iconify/vue";
import {API} from "@/util/API";
//import {useAuthStore} from "../stores/authStore";
import { useAuthStore } from "@/stores/authStore";
export default {
    name: "ProfileSettings",
    components: {Icon},
    setup() {
        //const store = useAuthStore();
        //this.curruser= store.user;
    },
    computed: {
        ...mapStores(useAuthStore),
        profile() {
            const store = useAuthStore();
            return store.profile
        },
        currentUser() {
            //return store.user;
        },
        currentProfile() {
            //return store.profile;
        },
        iconColor() {
            return "#000000"
        },
        hasProfileImage() {
            return false;
            //return this.profile.image.length > 0;
        }
    },
    data() {
        return {
            curruser : "",
            /*user: {
                id: "",
                username: "petter@hello.no",
                password: "",

            },
            qprofile: {
                name: "Petter",
                isRestricted: false,
                image: "../components/images/w66XcIlw.jpeg",
            },*/
            foodPreferences: [],
            allergens: [],
            deletionConfirmation: false,
        }
    },
    beforeMount(){
        //...mapStores(useAuthStore),

        //TODO: Hent bruker
        //todo hent profil
    },
    methods: {
      saveUserSettings(){
        alert("(Denne knappen gjør ingen ting) brukerinnstillinger lagret!")
          API.updateProfile(
              this.user.id,
              this.profile.name,
              this.profile.isRestricted,
              this.profile.image,
          );
      },
      saveAccountSettings(){
        alert("(Denne knappen gjør ingen ting) konto oppdatert")
          /*API.updateAccount(
              this.user.id,
              this.user.password,
              token);*/
      },
      deleteAccount(){
          if(this.deletionConfirmation===false){
              alert("Du må bekrefte at du vil slette konto ved å huke av boksen")
          }
          else {
              alert("(Denne knappen gjør ingen ting) men  account deleted")
              //API.deleteAccount(this.user.id, token);
          }

      },
      deleteUser(){
        alert("(Denne knappen gjør ingen ting)  bruker slettet")
      },
      saveFoodPreference() {
        alert("(Denne knappen gjør ingen ting) matpreferanser lagret")
      }
    }
}
</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>