'use client';

import CharacterHeader from './CharacterHeader';
import AIMessage from './AIMessage';
import UserMessage from './UserMessage';
import VirtualList from '@/components/ui/virtual-list';
import { useStreamChatStore } from '@/app/(main)/chat/[id]/stream-chat';

export default function MessageList() {
  const messages = useStreamChatStore((s) => s.messages);
  const itemList = [
    {
      type: 'header',
    },
    ...messages.map((i) => {
      return {
        type: i.role === 'user' ? 'user-message' : 'assistant-message',
        data: i,
      };
    }),
  ];

  const itemContent = (index: number, item: { type: string; data: any }) => {
    switch (item.type) {
      case 'user-message':
        return <UserMessage data={item.data} />;
      case 'assistant-message':
        return <AIMessage data={item.data} />;
      case 'header':
        return <CharacterHeader />;
      default:
        return null;
    }
  };

  return (
    <div className="flex-1 min-h-0 relative z-10">
      <VirtualList className="h-full" data={itemList} itemContent={itemContent} />
    </div>
  );
}
