<script setup>
import { ref, watch, computed } from 'vue';
import { appUser } from '../globals/user.js';
import { updateNotificationField } from '../services/subscriptionService.js';

const props = defineProps({
    forceShow: {
        type: Boolean,
        default: false
    },
    onToggle: Function // Optional callback for parent components
});

// Get values directly from global appUser
const notifyWhatsapp = ref(appUser.value?.notifyWhatsapp ?? false);
const notifySms = ref(appUser.value?.notifySms ?? false);
const notifyEmail = ref(appUser.value?.notifyEmail ?? false);

// Watch for changes to appUser and update local refs
watch(() => appUser.value, (newUser) => {
    if (!props.forceShow && newUser) {
        notifyWhatsapp.value = newUser.notifyWhatsapp ?? false;
        notifySms.value = newUser.notifySms ?? false;
        notifyEmail.value = newUser.notifyEmail ?? false;
    }
}, { immediate: true });

function onToggle(field, value) {
    // Update the user's notification settings directly
    if (appUser.value && appUser.value.id) {
        updateNotificationField(appUser.value.id, field, value);
    }

    // Call optional parent callback
    if (props.onToggle) {
        props.onToggle(field, value);
    }
}

const showToggles = computed(() => {
    // If forceShow is true, always show the toggles
    if (props.forceShow) return true;

    // Otherwise, show toggles only if user has no notifications enabled
    if (!appUser.value) return false;

    return !appUser.value.notifyWhatsapp && !appUser.value.notifySms && !appUser.value.notifyEmail;
});
</script>


<template>
    <div v-if="showToggles" class="notification-toggles-widget">
        <h3>Servicii la care ești abonat</h3>
        <div class="toggle-group">
            <label class="switch-label">WhatsApp
                <span class="switch">
                    <input type="checkbox" v-model="notifyWhatsapp"
                        @change="onToggle('notifyWhatsapp', notifyWhatsapp)" />
                    <span class="slider" :class="notifyWhatsapp ? 'on' : 'off'"></span>
                </span>
            </label>
            <label class="switch-label">SMS
                <span class="switch">
                    <input type="checkbox" v-model="notifySms" @change="onToggle('notifySms', notifySms)" />
                    <span class="slider" :class="notifySms ? 'on' : 'off'"></span>
                </span>
            </label>
            <label class="switch-label">Email
                <span class="switch">
                    <input type="checkbox" v-model="notifyEmail"
                        @change="onToggle('notifyEmail', $event.target.checked)" />
                    <span class="slider" :class="notifyEmail ? 'on' : 'off'"></span>
                </span>
            </label>
        </div>
        <div v-if="notifyWhatsapp" class="whatsapp-widget">
            <div class="whatsapp-info-text">
                Pentru a primi notificări pe WhatsApp finalizeaza abonarea accesand butonul de mai jos.
            </div>
            <a href="https://api.whatsapp.com/send/?phone=+14155238886&text=join+occur-clean" target="_blank"
                rel="noopener" class="whatsapp-join-btn">
                📲 Primește notificări pe WhatsApp
            </a>
        </div>
    </div>
</template>
