OpenFlare/frontend/contexts/notification-settings-context.tsx

'use client';

import {
  createContext,
  ReactNode,
  useContext,
  useEffect,
  useMemo,
  useState,
} from 'react';

interface NotificationSettingsContextType {
  showBell: boolean;
  isMounted: boolean;
  setShowBell: (value: boolean) => void;
}

const NotificationSettingsContext = createContext<
  NotificationSettingsContextType | undefined
>(undefined);

const STORAGE_KEY = 'notification-settings';

interface StoredSettings {
  showBell: boolean;
}

export function NotificationSettingsProvider({
  children,
}: {
  children: ReactNode;
}) {
  const [showBell, setShowBellState] = useState(true);
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    const stored = localStorage.getItem(STORAGE_KEY);
    if (stored) {
      try {
        const settings: StoredSettings = JSON.parse(stored);
        if (typeof settings.showBell === 'boolean') {
          setShowBellState(settings.showBell);
        }
      } catch {
        // Ignore parse errors
      }
    }
    setMounted(true);
  }, []);

  const setShowBell = (value: boolean) => {
    setShowBellState(value);
    const settings: StoredSettings = { showBell: value };
    localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
  };

  // Memoize context value to prevent unnecessary re-renders
  const contextValue = useMemo<NotificationSettingsContextType>(
    () => ({
      showBell,
      isMounted: mounted,
      setShowBell,
    }),
    [showBell, mounted],
  );

  return (
    <NotificationSettingsContext.Provider value={contextValue}>
      {children}
    </NotificationSettingsContext.Provider>
  );
}

export function useNotificationSettings() {
  const context = useContext(NotificationSettingsContext);
  if (context === undefined) {
    throw new Error(
      'useNotificationSettings must be used within a NotificationSettingsProvider',
    );
  }
  return context;
}