import { useCallback } from 'react';
import { useEditor } from '../context/EditorContext';
import { 
  Bold, Italic, List, ListOrdered, Link, Image, 
  Maximize, Minimize, Code, Heading1, Heading2, 
  Heading3, PanelLeft, PanelRight, Monitor, Save
} from 'lucide-react';

interface ToolbarProps {
  onSave: () => void;
}

const Toolbar: React.FC<ToolbarProps> = ({ onSave }) => {
  const { editor, viewMode, setViewMode, isFullscreen, toggleFullscreen } = useEditor();
  
  const handleImageUpload = useCallback(() => {
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = 'image/*';
    
    input.onchange = (event) => {
      const target = event.target as HTMLInputElement;
      const file = target.files?.[0];
      
      if (file && editor) {
        const reader = new FileReader();
        reader.onload = (e) => {
          const result = e.target?.result as string;
          editor.chain().focus().setImage({ src: result }).run();
        };
        reader.readAsDataURL(file);
      }
    };
    
    input.click();
  }, [editor]);

  const ToolbarButton = ({ 
    icon: Icon, 
    action, 
    isActive = false,
    title 
  }: { 
    icon: React.ElementType, 
    action: () => void, 
    isActive?: boolean,
    title: string 
  }) => (
    <button
      onClick={action}
      className={`p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors ${
        isActive ? 'text-blue-600 dark:text-blue-400' : 'text-gray-700 dark:text-gray-300'
      }`}
      title={title}
    >
      <Icon size={18} />
    </button>
  );

  return (
    <div className="border-b dark:border-gray-700 p-1 flex flex-wrap gap-1 bg-white dark:bg-gray-800 sticky top-0 z-10">
      <div className="flex items-center gap-1 mr-2">
        <ToolbarButton 
          icon={Bold} 
          action={() => editor?.chain().focus().toggleBold().run()} 
          isActive={editor?.isActive('bold')}
          title="Bold"
        />
        <ToolbarButton 
          icon={Italic} 
          action={() => editor?.chain().focus().toggleItalic().run()} 
          isActive={editor?.isActive('italic')}
          title="Italic"
        />
        <ToolbarButton 
          icon={Code} 
          action={() => editor?.chain().focus().toggleCode().run()} 
          isActive={editor?.isActive('code')}
          title="Inline Code"
        />
      </div>
      
      <div className="h-6 w-px bg-gray-300 dark:bg-gray-700" />
      
      <div className="flex items-center gap-1 mx-2">
        <ToolbarButton 
          icon={Heading1} 
          action={() => editor?.chain().focus().toggleHeading({ level: 1 }).run()} 
          isActive={editor?.isActive('heading', { level: 1 })}
          title="Heading 1"
        />
        <ToolbarButton 
          icon={Heading2} 
          action={() => editor?.chain().focus().toggleHeading({ level: 2 }).run()} 
          isActive={editor?.isActive('heading', { level: 2 })}
          title="Heading 2"
        />
        <ToolbarButton 
          icon={Heading3} 
          action={() => editor?.chain().focus().toggleHeading({ level: 3 }).run()} 
          isActive={editor?.isActive('heading', { level: 3 })}
          title="Heading 3"
        />
      </div>
      
      <div className="h-6 w-px bg-gray-300 dark:bg-gray-700" />
      
      <div className="flex items-center gap-1 mx-2">
        <ToolbarButton 
          icon={List} 
          action={() => editor?.chain().focus().toggleBulletList().run()} 
          isActive={editor?.isActive('bulletList')}
          title="Bullet List"
        />
        <ToolbarButton 
          icon={ListOrdered} 
          action={() => editor?.chain().focus().toggleOrderedList().run()} 
          isActive={editor?.isActive('orderedList')}
          title="Numbered List"
        />
      </div>
      
      <div className="h-6 w-px bg-gray-300 dark:bg-gray-700" />
      
      <div className="flex items-center gap-1 mx-2">
        <ToolbarButton 
          icon={Link} 
          action={() => {
            const url = window.prompt('URL');
            if (url) {
              editor?.chain().focus().setLink({ href: url }).run();
            }
          }}
          isActive={editor?.isActive('link')}
          title="Add Link"
        />
        <ToolbarButton 
          icon={Image} 
          action={handleImageUpload}
          title="Add Image"
        />
      </div>
      
      <div className="h-6 w-px bg-gray-300 dark:bg-gray-700" />
      
      <div className="flex items-center gap-1 mx-2">
        <ToolbarButton 
          icon={PanelLeft} 
          action={() => setViewMode('edit')}
          isActive={viewMode === 'edit'}
          title="Editor Only"
        />
        <ToolbarButton 
          icon={Monitor} 
          action={() => setViewMode('split')}
          isActive={viewMode === 'split'}
          title="Split View"
        />
        <ToolbarButton 
          icon={PanelRight} 
          action={() => setViewMode('preview')}
          isActive={viewMode === 'preview'}
          title="Preview Only"
        />
      </div>
      
      <div className="h-6 w-px bg-gray-300 dark:bg-gray-700" />
      
      <div className="flex items-center gap-1 mx-2">
        <ToolbarButton 
          icon={isFullscreen ? Minimize : Maximize} 
          action={toggleFullscreen}
          title={isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}
        />
        <ToolbarButton 
          icon={Save} 
          action={onSave}
          title="Save"
        />
      </div>
    </div>
  );
};

export default Toolbar;