import { useState, useCallback, useEffect } from 'react';
import type { VideoAutoplay } from '../settings/storage';
import { getVideoAutoplay, setVideoAutoplay as persistVideoAutoplay } from '../settings/storage';
import { VideoAutoplayContext } from './videoAutoplayContext';
export { VideoAutoplayContext } from './videoAutoplayContext';

export function VideoAutoplayProvider({ children }: { children: React.ReactNode }) {
  const [autoplay, setAutoplayState] = useState<VideoAutoplay>(getVideoAutoplay);

  const setAutoplay = useCallback((mode: VideoAutoplay) => {
    persistVideoAutoplay(mode);
    setAutoplayState(mode);
  }, []);

  
  useEffect(() => {
    const handler = (e: StorageEvent) => {
      if (e.key === 'foxsky_settings') {
        setAutoplayState(getVideoAutoplay());
      }
    };
    window.addEventListener('storage', handler);
    return () => window.removeEventListener('storage', handler);
  }, []);

  return (
    <VideoAutoplayContext.Provider value={{ autoplay, setAutoplay }}>
      {children}
    </VideoAutoplayContext.Provider>
  );
}