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

const DisplayModeContext = createContext();

export const DisplayModeProvider = ({ children }) => {
  const [displayMode, setDisplayMode] = useState(() => {
    return localStorage.getItem('displayMode') || 'comfortable';
  });

  const [isPdfPreviewVisible, setIsPdfPreviewVisible] = useState(() => {
    return localStorage.getItem('pdfPreviewVisible') === 'true';
  });

  useEffect(() => {
    localStorage.setItem('displayMode', displayMode);
  }, [displayMode]);

  useEffect(() => {
    localStorage.setItem('pdfPreviewVisible', isPdfPreviewVisible);
  }, [isPdfPreviewVisible]);

  const toggleDisplayMode = () => {
    setDisplayMode(prev => prev === 'compact' ? 'comfortable' : 'compact');
  };

  const togglePdfPreview = () => {
    setIsPdfPreviewVisible(prev => !prev);
  };

  return (
    <DisplayModeContext.Provider value={{ 
      displayMode, 
      toggleDisplayMode,
      isPdfPreviewVisible,
      togglePdfPreview,
      setIsPdfPreviewVisible 
    }}>
      {children}
    </DisplayModeContext.Provider>
  );
};

export const useDisplayMode = () => useContext(DisplayModeContext);