import React, { createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useState } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

export interface AppSettings{
    theme: 'dark'|'light'|'system';
    showEmail: boolean;
    outOfBounds:boolean;
    showOP:boolean;
}

const defaultSettings: AppSettings = {
    theme: 'system',
    showEmail: true,
    outOfBounds: true,
    showOP: true
}

interface SettingsContextType {
    settings: AppSettings;
    setSettings: React.Dispatch<React.SetStateAction<AppSettings>>;
}

export const SettingsContext = createContext<SettingsContextType>({
    settings: defaultSettings,
    setSettings: () => {}
});

export const SettingsProvider = ({children}:{children: ReactNode}) => {
    const [settings, setSettings] = useState<AppSettings>(defaultSettings);

    useEffect(() => {
        /**
         * Method to specifically load settings from storage.
         */
        const loadSettings = async()=>{
            try{
                const storedSettings = await AsyncStorage.getItem('appSettings');
                if(storedSettings){
                    const parsed = JSON.parse(storedSettings)
                    setSettings(parsed)
                    console.log('LOADED SETTINGS: ',parsed)
                }
            }catch(e){
                console.error('Error loading app settings:',e)
            }
        }

        loadSettings();
    }, []);

    useEffect(() => {
        try{
            console.log('Updating settings:', settings);
            // Persist settings to storage whenever they change
            AsyncStorage.setItem('appSettings', JSON.stringify(settings));
        }catch(e){
            console.error('Error saving app settings:', e);
        }
    }, [settings]);

    return(
        <SettingsContext.Provider value={{settings, setSettings}}>
            {children}
        </SettingsContext.Provider>
    )
}

export const useSettings = () => useContext(SettingsContext);