import React from 'react';
import { VideoPlayer } from './video-player';
import { ImageViewer } from './image-viewer';
import { MarkdownViewer } from './markdown-viewer';
import { useChat } from '../../providers/chat-provider';
import '../../styles/projector.css';

export function ProjectorView() {
  const { line } = useChat();
  const [content, setContent] = React.useState<any>(null);

  React.useEffect(() => {
    if (!line) return;

    const subscription = line.activity$
      .subscribe((activity: any) => {
        if (activity.type === 'event' && activity.name === 'project') {
          setContent(activity.value);
        }
      });

    return () => subscription.unsubscribe();
  }, [line]);

  const renderContent = () => {
    if (!content) return null;

    switch (content.type) {
      case 'video':
        return <VideoPlayer url={content.url} />;
      case 'image':
        return <ImageViewer url={content.url} />;
      case 'markdown':
        return <MarkdownViewer content={content.text} />;
      default:
        return null;
    }
  };

  return (
    <div className="projector-container">
      {renderContent()}
    </div>
  );
}