<script setup>
    import { useRouter } from 'vue-router';
    import { useAuthStore } from '../stores/auth';
    import { useNotificationsStore } from '../stores/notifications';
    import { useI18n } from 'vue-i18n';
    import { ref } from 'vue';
import { onMounted } from 'vue';
import CustomRadioInput from './ui/CustomRadioInput.vue';
import { watch } from 'vue';

    const noty = useNotificationsStore();
    const auth = useAuthStore();
    const router = useRouter();
    const lang = ref(null);
    const { t, locale } = useI18n();

    onMounted(() => {
        console.log('INIT popup');
        lang.value = localStorage.getItem('lang') ?? 'es';
        locale.value = lang.value;
    });

    watch(lang, () => {
        console.log('change lang')
        locale.value = lang.value
        localStorage.setItem('lang', lang.value)
    })

    const closePopup = () => {
        noty.toggleProfile()
    }

    const handleEditProfile = () => {
        closePopup();
        router.push({name: 'profile'})
    }
</script>

<template>
    <div
        v-if="noty.openProfile"
    >
        <div 
            class="content-profile"
            @click="closePopup()"
        >
        </div>
        <div 
            class="profile-card">
            <i class="fa-solid fa-xmark close-icon" @click="closePopup()"></i>
            <h3>{{auth.user?.first_name}} {{ auth.user?.last_name }}</h3>
            <p>{{ auth.user?.email }}</p>
            <p>{{ auth.user?.phone }}</p>
            <p class="section-prefs">{{ t('global.prefs') }}</p>
            <p class="label-item">{{ t('global.lang') }}:</p>
            <CustomRadioInput
                value="es" 
                :label="t('global.es')"
                name="lang"
                v-model:typeselected="lang"
            />
            <CustomRadioInput
                value="en" 
                :label="t('global.en')"
                name="lang"
                v-model:typeselected="lang"
            />
            <br>
            <button 
                class="btn btn-dark"
                data-toggle="modal" 
                data-target="#editProfileModal"
                @click="handleEditProfile()"
            >{{ t('buttons.editProfile') }}</button>
        </div>
    </div>
</template>

<style scoped>

    .content-profile {
        position: fixed;
        z-index: 1000;
        width: 100wv;
        right: 0px;
        top: 0px;
        left: 0px;
        cursor: pointer;
        bottom: 0px;
        background-color: #000;
        opacity: 0.2;
    }

    .profile-card {
        position: fixed;
        right: 20px;
        top: 70px;
        z-index: 2000;
        width: 320px;
        background-color: #FFF;
        opacity: 1;
        border-radius: 13px;
        padding: 20px 32px;
        display: flex;
        flex-direction: column;
        /* flex-wrap: nowrap; */
        /* overflow: hidden; */
        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.10));
    }

    .section-prefs {
        margin-top: 20px !important;
        font-size: 1rem !important;
        color: grey;
    }

    .label-item {
        font-weight: 900 !important;
        font-size: 1.2rem !important;
        margin-bottom: 1rem;
    }

    .profile-card h3 {
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: 1.2rem;
        font-weight: 700;
    }

    .profile-card p {
        margin-top: 8px;
        font-size: 1rem;
        font-weight: 500;
        text-overflow: ellipsis;
    }

    .close-icon {
        display: flex;
        position: absolute;
        right: 20px;
        top: 16px;
        cursor: pointer;
        font-size: 24px;
    }
</style>