import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
import {
  dispatchVisualPrefsChange,
  loadGlowParticlesEnabled,
  saveGlowParticlesEnabled,
  VISUAL_PREFS_EVENT,
} from '../visual/visualPrefs';

type VisualEffectsContextValue = {
  glowParticles: boolean;
  setGlowParticles: (v: boolean) => void;
};

const VisualEffectsContext = createContext<VisualEffectsContextValue | null>(null);

export function VisualEffectsProvider({ children }: { children: React.ReactNode }) {
  const [glowParticles, setGlowState] = useState(loadGlowParticlesEnabled);

  const setGlowParticles = useCallback((v: boolean) => {
    saveGlowParticlesEnabled(v);
    setGlowState(v);
    dispatchVisualPrefsChange();
  }, []);

  useEffect(() => {
    const sync = () => setGlowState(loadGlowParticlesEnabled());
    window.addEventListener(VISUAL_PREFS_EVENT, sync);
    return () => window.removeEventListener(VISUAL_PREFS_EVENT, sync);
  }, []);

  const value = useMemo(
    () => ({ glowParticles, setGlowParticles }),
    [glowParticles, setGlowParticles]
  );

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

export function useVisualEffects(): VisualEffectsContextValue {
  const ctx = useContext(VisualEffectsContext);
  if (!ctx) {
    return {
      glowParticles: loadGlowParticlesEnabled(),
      setGlowParticles: (v) => {
        saveGlowParticlesEnabled(v);
        dispatchVisualPrefsChange();
      },
    };
  }
  return ctx;
}