import { ref, onMounted } from 'vue';
import axios from 'axios';

export function useUserSettings() {
    const settings = ref({});
    const isLoading = ref(false);

    const fetchSettings = async () => {
        isLoading.value = true;
        try {
            const response = await axios.post('/UserSettings/Get');
            settings.value = response.data || {};
        } catch (error) {
            console.error('Failed to fetch user settings:', error);
        } finally {
            isLoading.value = false;
        }
    };

    const updateSetting = async (key, value) => {
        settings.value[key] = value;
        try {
            await axios.post('/UserSettings/Update', { [key]: value });
        } catch (error) {
            console.error(`Failed to update setting ${key}:`, error);
        }
    };

    const getSetting = (key, defaultValue = null) => {
        return settings.value[key] !== undefined ? settings.value[key] : defaultValue;
    };

    onMounted(() => {
        fetchSettings();
    });

    return {
        settings,
        isLoading,
        fetchSettings,
        updateSetting,
        getSetting
    };
}