<template lang="html">
<main class="user-panel">
    
    <div class="user-avatar-section">
        <h3>Avatar</h3>

        <div class="avatar-row">
            <div class="user-avatar-container">
                <img :src="avatarImg" class="user-avatar-img" />
            </div>

            <div class="user-avatar-bt-set">
                <div class="avatar-input-box">
                    <input type="file" id="avatar" accept="image/png, image/jpeg" @change="HandleAvatartFile" hidden />
                    <button class="bt bt-normal" style="width: 160px;"><label for="avatar">
                        <svg width="16" height="16" fill="currentColor">
                            <use xlink:href="#ico-catalog"/>
                        </svg>
                        Przeglądaj...</label></button>
                    <div class="avatar-path-string">{{ avatarFilePath }}</div>
                </div>
                <div class="avatar-bt-update">
                    <button class="bt bt-accept" style="width: 160px;" @click="UpdateAvatar">
                        <svg width="16" height="16" fill="currentColor">
                            <use xlink:href="#ico-upload"/>
                        </svg>
                        Aktualizuj</button>
                    <button class="bt bt-danger" style="width: 160px;" @click="DeleteUserAvatar">
                        <svg width="16" height="16" fill="currentColor">
                            <use xlink:href="#ico-remove-record"/>
                        </svg>
                        Skasuj
                    </button>
                </div>
            </div>
        </div>
        <span class="smol-info-txt" style="margin-top: 8px;">Plik nie może być większy niż 1MB</span>
        <MessageWindow v-if="avatarMessBexVisible" :mess="avatarMessBoxData" @messHide="avatarMessBexVisible = false" />
    </div>

    <hr class="panel-hr-separator">

    <div class="user-data-section">

        <div>
            <h3>Dane użytnika</h3>

            <div class="pad32">
                <label for="user-name">Nazwa użytkownika</label>
                <input type="text" v-model="nickName" :maxlength="maxCharLen" id="user-name" class="in in-default" style="width: 100%;" />
                <span class="smol-info-txt">Dostępne: {{ maxCharLen - UserLenghtGlyph }} znaków</span>
            </div>

            <button class="bt bt-accept" @click="UpdateProfile" style="width: 160px;">Aktualizuj dane</button>
            <MessageWindow v-if="userMessBoxVisible" :mess="userMessBoxData" @messHide="userMessBoxVisible = false" />
        </div>

    </div>

    <hr class="panel-hr-separator">

    <div class="user-data-section">

        <div class="user-password-section">
            <h3>Hasło</h3>

            <label for="user-old-password">Aktualne hasło</label>
            <input type="password" v-model="actualPasswod" :minlength="minPassChar" :maxlength="maxPassChar" class="in in-default" />

            <div class="user-new-password-section margtb8">
                <div class="passwod-box">
                    <label for="user-new-password">Nowe hasło</label>
                    <input type="password" v-model="newPassword" :minlength="minPassChar" :maxlength="maxPassChar" id="user-new-password" class="in in-default" />
                    <span :class="newPassTxtClass">Dostępne: {{ maxPassChar - NewPassLenghtGlyph }} znaków</span>
                </div>
            
                <div class="passwod-box">
                    <label for="user-confirm-password">Potwierdź hasło</label>
                    <input type="password" v-model="confirmPassword" :minlength="minPassChar" :maxlength="maxPassChar" id="user-confirm-password" class="in in-default" />
                </div>
            </div>
            <button @click="updatePassword" class="bt bt-accept" style="width: 160px; margin-top: 16px;">Aktualizuj hasło</button>
            <MessageWindow v-if="passwordMessBoxVisible" :mess="passwdMessBoxData" @messHide="passwordMessBoxVisible = false" />
        </div>

    </div>

</main>
</template>
<script lang="js">
import { useAuterizationStore } from '@/stores/auterization';
import MessageWindow from '@/components/ui/message.vue';
import { ref, watch } from 'vue';

export default {
    name: 'UserControlContent',
    components: {
        MessageWindow,
    },

    data() {
        return {
            avatarFilePath: "",
            avatarDefaultText: "...Nie wybrano pliku...",

            //avatar file
            avatarFile: null,

            //user data
            nickName: '', 
            charLenght: 0,
            maxCharLen: 56,

            //user passwod
            actualPasswod: '',

            //new password
            newPassword: '',
            confirmPassword: '',

            //max passwond lenght
            minPassChar: 8,
            maxPassChar: 255,

            newPassTxtClass: 'smol-info-txt',

            //Message Box
            passwordMessBoxVisible: false,
            passwdMessBoxData: {},

            userMessBoxVisible: false,
            userMessBoxData: {},

            avatarMessBexVisible: false,
            avaterMessBoxData: {},
        }
    },

    setup() {
        const auterization = useAuterizationStore();
        const avatarImg = ref(auterization.userAvatar);
        const userName = ref(auterization.userName);

        watch(
            () => auterization.userAvatar, (newValue) => {
                avatarImg.value = newValue;
            }
        );

        return {
            avatarImg,
            userName,
            
            UpdateUserAvatar: auterization.UpdateUserAvatar,
            DeleteUserAvatar: auterization.DeleteUserAvatar,
            UpdateUserData: auterization.UpdateUserData,
            UpdateUserPassword: auterization.UpdateUserPassword,
        }
    },

    computed: {
    UserLenghtGlyph() {
      return  this.nickName.length;
    },

    NewPassLenghtGlyph() {
      return this.newPassword.length;
    }
  },

    mounted() {
        this.avatarFilePath = this.avatarDefaultText;
        this.nickName = this.userName;
    },

    methods: {
        async HandleAvatartFile(event) {
            const file = event.target.files[0];
            if(file) {
                this.avatarFilePath = file.name;
                this.avatarFile = file;
            }
        },

        //Aktualizacja avatara
        async UpdateAvatar() {
            console.log(this.avatarFile);

            if (!this.avatarFile) {
                console.error(`Nie wybrano pliku`);
                this.ShowAvatarMessage('MESS_ERROR', 'Nie wybrano pliku');
                return;
            }

            if (this.avatarFile.size > 1024 * 1024) {
                console.error(`Plik jest za duży. Max 1MB`);
                this.ShowAvatarMessage('MESS_ERROR', 'Plik jest za duży. Maksymalny rozmiar pliku to 1MB');
                return;
            }

            const formData = new FormData();
            formData.append("file", this.avatarFile);

            console.log(this.avatarFile);

            const response = await this.UpdateUserAvatar(formData);

            if (response.success) {
                this.avatarFile = null;
                this.ShowAvatarMessage('MESS_OK', response.mess);
            }
            else {
                this.ShowAvatarMessage('MESS_ERROR', response.mess);
            }
        },

        //Kasowanie avatara
        async DeleteAvatar() {
            const response = await this.DeleteUserAvatar();
            if (response.success) {
                this.avatarFile = null;
                this.ShowAvatarMessage('MESS_OK', response.mess);
            }
            else {
                this.ShowAvatarMessage('MESS_ERROR', response.mess);
            }
        },

        //Aktualizacja hasła request
        async updatePassword() {
            if (this.newPassword && this.confirmPassword) {

                if (this.NewPassLenghtGlyph < 8) {
                    this.ShowPasswordMessage('MESS_ERROR', 'Hasło musi zawierać conajmniej 8 znaków!');
                    return;
                }

                if (!this.CompareTwoPasswdStrings(this.newPassword, this.confirmPassword)) {
                    this.ShowPasswordMessage('MESS_ERROR', 'Hasła nie są do siebie podobne');
                    return;
                }

                if (!this.ValidGlyphsPass(this.newPassword)) {
                    this.ShowPasswordMessage('MESS_ERROR', 'Hasło musi składać się z liter a-z A-Z 0-9 i znaki specjalne');
                    return;
                }

                const passdata = {
                    pass: this.actualPasswod,
                    newPass: this.newPassword,
                    confirmPass: this.confirmPassword
                };

                const response = await this.UpdateUserPassword(passdata);
                if (response.success) {
                    console.log('Udało się pomyślnie zaktualizować hasło');
                    this.actualPasswod = '';
                    this.newPassword = '';
                    this.confirmPassword = '';
                    this.ShowPasswordMessage('MESS_OK', response.mess);
                }
                else {
                    console.error(response.mess);
                    this.ShowPasswordMessage('MESS_ERROR', response.mess);
                }
            }
            else {
                console.error('Nie wypełniono pól');
                this.ShowPasswordMessage('MESS_ERROR', 'Nie wypełniono wymaganych pól');
            }
        },

        //Aktualizacja danych użytnika request
        async UpdateProfile() {
            if (this.nickName) {
                if (this.UserLenghtGlyph < 3) {
                    this.ShowUserMessage('MESS_ERROR', 'Nazwa użytkownika powinna składać się co najmniej 3 znaków');
                    return;
                }

                if (!this.ValidGlyphsLetters(this.nickName) && !this.ValidGlyphsDigits(this.nickName) && this.ValidGlyphsSpecialChar(this.nickName)) {
                    this.ShowUserMessage('MESS_ERROR', 'Nazwa użytkownika powinna składać się jedynie ze znaków a-z A-Z 0-9');
                    return;
                }

                const data = {name: this.nickName};

                const response = await this.UpdateUserData(data);

                if (response.success) {
                    this.ShowUserMessage('MESS_OK', response.mess);
                }
                else {
                    this.ShowUserMessage('MESS_ERROR', response.mess);
                }
            }
            else {
                console.error('Pole nazwy użytkownika jest puste');
                this.ShowUserMessage('MESS_ERROR', 'Wymagane pole jest puste');
            }
        },

        //Sprawdzanie poprawności wpisanego hasla
        ValidGlyphsPass(pass) {
            const hasUpperCase = /[A-Z]/.test(pass);
            const hasLowerCase = /[a-z]/.test(pass);
            const hasDigit = /\d/.test(pass);
            const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(pass);

            return hasUpperCase && hasLowerCase && hasDigit && hasSpecialChar;
        },

        //Sprawdza duże i małe literki
        ValidGlyphsLetters(s) {
            const hasUpperCase = /[A-Z]/.test(s);
            const hasLowerCase = /[a-z]/.test(s);

            return hasUpperCase && hasLowerCase;
        },
        
        //Sprawdza cyferki
        ValidGlyphsDigits(s) {
            const hasDigit = /\d/.test(s);
            return hasDigit;
        },

        //Sprawdza znaki specjalne
        ValidGlyphsSpecialChar(s) {
            const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(s);
            return hasSpecialChar;
        },

        //Porównanie nowego hasła z ciągiem kontrolnym
        CompareTwoPasswdStrings(pass1, pass2) {
            if (pass1 === pass2) {return true}
            return false;
        },

        //Kontrola message boxów
        ShowPasswordMessage(c, m) {
            this.passwordMessBoxVisible = false;
            this.passwdMessBoxData = {
                type: c,
                content: m
            };
            this.passwordMessBoxVisible = true;
        },

        ShowUserMessage(c, m) {
            this.userMessBoxVisible = false;
            this.userMessBoxData = {
                type: c,
                content: m
            };
            this.userMessBoxVisible = true;
        },

        ShowAvatarMessage(c, m) {
            this.avatarMessBexVisible = false;
            this.avatarMessBoxData = {
                type: c,
                content: m
            };
            this.avatarMessBexVisible = true;
        }
    },
}
</script>
