<script setup>
    import { useNotificationsStore } from '../../stores/notifications';
    import CustomSwitch from '../../components/CustomSwitch.vue'
    import { useI18n } from 'vue-i18n';
    import { ref } from 'vue';
    import { onMounted } from 'vue';
    import { watch } from 'vue';
    import { usePrivacyStore } from '../../stores/privacy';

    const lang = ref(null);
    const privacy = ref(false);
    
    const noty = useNotificationsStore();
    const privacyStore = usePrivacyStore();
    const { t, locale } = useI18n();

    onMounted(() => {
        lang.value = localStorage.getItem('lang') ?? 'es';
        locale.value = lang.value;
        privacy.value = privacyStore.privacy;
    });

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

    watch(privacy, () => {
        privacyStore.updatePrivacy(privacy.value);
    })

    const closePopup = () => {
        noty.toggleConfig();
    }

</script>

<template>
    <div
        v-if="noty.openConfig"
    >
        <div 
            class="content-popup"
            @click="closePopup()"
        >
        </div>
        <div 
            class="profile-card">
            <i class="fa-solid fa-xmark close-icon" @click="closePopup()"></i>
            <br>
            <CustomSwitch 
                label="Activar configuracion de privacidad"
                v-model="privacy"
                name="privacity"
            />
        </div>
    </div>
</template>

<style scoped>

    .content-popup {
        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;
        flex: 1;
        right: 20px;
        top: 70px;
        z-index: 2000;
        width: 340px;
        background-color: #FFF;
        opacity: 1;
        border-radius: 13px;
        padding: 20px 20px;
        display: flex;
        flex-direction: column;
        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.10));
    }

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