/* eslint-disable no-unused-vars */ import { createContext, type PropsWithChildren, useContext, useState } from 'react'; import { defaultSettings, ISettings, type TSettingsThemeMode } from '@/config/settings.config'; import { getData, setData } from '@/utils'; export interface ISettingsProps { settings: ISettings; storeSettings: (settings: Partial) => void; updateSettings: (settings: Partial) => void; getThemeMode: () => TSettingsThemeMode; } const SETTINGS_CONFIGS_KEY = 'settings-configs'; const getStoredSettings = (): Partial => { return (getData(SETTINGS_CONFIGS_KEY) as Partial) || {}; }; const initialProps: ISettingsProps = { settings: { ...defaultSettings, ...getStoredSettings() }, updateSettings: (settings: Partial) => {}, storeSettings: (settings: Partial) => {}, getThemeMode: () => 'light' }; const LayoutsContext = createContext(initialProps); const useSettings = () => useContext(LayoutsContext); const SettingsProvider = ({ children }: PropsWithChildren) => { const [settings, setSettings] = useState(initialProps.settings); const updateSettings = (newSettings: Partial) => { setSettings({ ...settings, ...newSettings }); }; const storeSettings = (newSettings: Partial) => { setData(SETTINGS_CONFIGS_KEY, { ...getStoredSettings(), ...newSettings }); updateSettings(newSettings); }; const getThemeMode = (): TSettingsThemeMode => { const { themeMode } = settings; if (themeMode === 'system') { return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; } else if (themeMode === 'dark') { return 'dark'; } else { return 'light'; } }; return ( {children} ); }; // eslint-disable-next-line react-refresh/only-export-components export { SettingsProvider, useSettings };