import { useState, useCallback, useEffect } from 'react';
import type { ReplyStyle } from '../settings/storage';
import { getReplyStyle, setReplyStyle as persistReplyStyle } from '../settings/storage';
import { ReplyStyleContext } from './replyStyleContext';
export { ReplyStyleContext } from './replyStyleContext';

export function ReplyStyleProvider({ children }: { children: React.ReactNode }) {
  const [style, setStyleState] = useState<ReplyStyle>(getReplyStyle);

  const setStyle = useCallback((newStyle: ReplyStyle) => {
    persistReplyStyle(newStyle);
    setStyleState(newStyle);
  }, []);

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

  return (
    <ReplyStyleContext.Provider value={{ style, setStyle }}>
      {children}
    </ReplyStyleContext.Provider>
  );
}