<template>
    <h2>Konto-innstillinger</h2>

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

        <p id="emailField">Epost: {{this.account.email}}</p><br>

        <label for="fname">Endre fornavn</label><br>
        <input type="text" id="fname" v-model="updatedAccount.upFirstname"><br>

        <label for="password">Endre passord</label><br>
        <input type="password" id="password" v-model="updatedAccount.upPassword">

        <button class="saveBtn" @click="saveAccountSettings">Lagre profilendringer</button>
        <p :style={color:alertMsgColor} id="alert">{{alertMsg}}</p>
    </form>

    <button @click="logOut">Logg ut</button>

    <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" id ="delAccount" @click="deleteAccount">SLETT KONTO</button>
        <p :style={color:alertMsgColor} id="alert">{{delAlertMsg}}</p>
    </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: "EditAccount",
    computed: {
        ...mapState(useAuthStore, ['account']),
        ...mapStores(useAuthStore),
        updatedAccount() {
            return {
                upFirstname: this.account.firstname,
                upPassword:'',
            }
        },
        iconColor() {
            return "#000000"
        },
    },
    data() {
        return {
            deletionConfirmation: false,
            alertMsg:'',
            alertMsgColor:'black',
            delAlertMsg:'',
        }
    },
    methods: {
        saveAccountSettings(){ //passord
            const id = this.account.id;

            let newPassword = null
            let newFirstName = null;

            //checks if username and password have been changed
            if(this.updatedAccount.upPassword.length!==0) {
                newPassword = this.updatedAccount.upPassword;
            }
            if(this.updatedAccount.upFirstname!==''){
                newFirstName = this.updatedAccount.upFirstname;
            }

            API.updateAccount(
                id,{
                    firstname:newFirstName,
                    password:newPassword,
                }
            ).then((savedAccount)=>{
                useAuthStore().setAccount(savedAccount);
                this.setAlertText("Konto oppdatert.",'light-green')
            }).catch((error)=> {
                this.setAlertText("Det oppsto en feil. ",'red');
            })
        },
        deleteAccount(){
            if(this.deletionConfirmation===false){
                this.setDeleationAlertText("Du må bekrefte at du vil slette konto ved å huke av boksen", 'red')
            }
            else {
                const id = this.account.id;
                API.deleteAccount(
                    id
                ).then(()=>{
                    router.push('/login')
                }).catch((error)=> {
                    this.setDeleationAlertText("Melding: Det oppsto en feil ved sletting av bruker", 'red')
                })
            }
        },
        logOut(){
            useAuthStore().logout();
            router.push('/login')
        },




        setAlertText(text, color){
            switch (color) {
                case 'red':
                    this.alertMsgColor ='#EE6D6D';
                    this.alertMsg = text;
                    break;
                case 'light-green':
                    this.alertMsgColor ='hsla(160, 100%, 37%, 1);';
                    this.alertMsg = text;
                    break;
                default:
                    this.alertMsgColor ='black';
                    this.alertMsg = text;
                    break;
            }
        },
        setDeleationAlertText(text,color){
            switch (color) {
                case 'red':
                    this.alertMsgColor ='#EE6D6D';
                    this.delAlertMsg = text;
                    break;
                case 'light-green':
                    this.alertMsgColor ='hsla(160, 100%, 37%, 1);';
                    this.delAlertMsg = text;
                    break;
                default:
                    this.alertMsgColor ='black';
                    this.delAlertMsg = text;
                    break;
            }
        }
    }
 }
</script>

<style scoped lang="scss">

</style>