<template lang="html">    
    <div class="img-site-box">
        <h2 style="font-weight: bold; margin-top: 38px;">Logowanie</h2>
    </div>

    <div class="sign-in-imput-box d-flex flex-column p-3 mt-5">
        <div class="lgn-input-box">
          <label for="sin-emial-input" class="form-label">E-mail</label>
          <input type="email" class="in in-default" style="width: 100%;" id="sin-emial-input" aria-describedby="emailHelp" v-model="email">
          <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
        </div>
        <div class="lgn-input-box">
          <label for="sin-pass-input" class="form-label">Hasło</label>
          <input type="password" class="in in-default" style="width: 100%;" id="sin-pass-input" v-model="password">
        </div>
        <div class="recovery-pass-hurl">
          <span class="recovery-url" @click="$emit('recoverScr')" v-if="false">Nie pamiętam hasła</span>
        </div>
    </div>

    <div class="sign-in-btcb p-3">
        <button class="bt bt-normal mr-4 ml-4 bt-sin" @click="SignInUser" @ref="btnLogin">Zaloguj</button>
    </div>

    <div class="sin-mess mt-3 d-flex flex-row justify-content-center align-items-center scale-up-center" v-if="incorrectMess">
        <div class="mess-string">Nie prawidłowe dane logowania</div>
    </div>
</template>
<script lang="js">
import { useAuterizationStore } from '@/stores/auterization';

export default {
    name: 'LoginWindow',
    data() {
        return {
            email: "",
            password: "",
            remembersin: false,

            //stanLogowania
            success: false,
            incorrectMess: false,

            //Adres do validacji
            validUrl: process.env.VUE_APP_USER_VALID
        }
    },

    setup() {
        const auterizationStore = useAuterizationStore();

        return {
            auterizationStore,
            ValidLogin: auterizationStore.ValidLogin,
        }
    },

    mounted() {
        document.addEventListener('keydown', this.handleKeyEven);
    },

    unmounted() {
        document.removeEventListener('keydown', this.handleKeyEven);
    },

    emits: ['shakeScr', 'recoverScr'],

    methods: {
        async SignInUser() {
            this.success = await this.ValidLogin(this.email, this.password, this.remembersin);

            if (this.success) {
                this.$router.push('/anime');
                //this.$emit('loginSuccess');
                console.log('ZALOGOWANY');
                this.incorrectMess = false;
            }
            else{
                console.log('NIE DZIAŁA :C');
                this.incorrectMess = true;
                this.$emit("shakeScr");
            }
        },
    }
}
</script>