import React, { createContext, useState, useContext, ReactNode } from 'react';
import { Editor } from '@tiptap/react';

type ViewMode = 'edit' | 'preview' | 'split';

interface EditorContextType {
  content: string;
  setContent: (content: string) => void;
  editor: Editor | null;
  setEditor: (editor: Editor | null) => void;
  viewMode: ViewMode;
  setViewMode: (mode: ViewMode) => void;
  isFullscreen: boolean;
  toggleFullscreen: () => void;
}

const EditorContext = createContext<EditorContextType>({
  content: '',
  setContent: () => {},
  editor: null,
  setEditor: () => {},
  viewMode: 'edit',
  setViewMode: () => {},
  isFullscreen: false,
  toggleFullscreen: () => {},
});

export const useEditor = () => useContext(EditorContext);

const initialContent = `<h2>Welcome to the HTML Editor</h2>
<p>Start writing your content here...</p>`;

export const EditorProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
  const [content, setContent] = useState(initialContent);
  const [editor, setEditor] = useState<Editor | null>(null);
  const [viewMode, setViewMode] = useState<ViewMode>('edit');
  const [isFullscreen, setIsFullscreen] = useState(false);

  const toggleFullscreen = () => {
    setIsFullscreen(prev => !prev);
  };

  return (
    <EditorContext.Provider
      value={{
        content,
        setContent,
        editor,
        setEditor,
        viewMode,
        setViewMode,
        isFullscreen,
        toggleFullscreen,
      }}
    >
      {children}
    </EditorContext.Provider>
  );
};

export const useEditorContext = useEditor;