import { ThreadType } from '@lobechat/types';
import { Flexbox } from '@lobehub/ui';
import { memo } from 'react';

import { useFetchThreads } from '@/hooks/useFetchThreads';
import { useChatStore } from '@/store/chat';
import { threadSelectors } from '@/store/chat/selectors';

import ThreadItem from './ThreadItem';

const ThreadList = memo(({ topicId }: { topicId: string }) => {
  const threads = useChatStore(threadSelectors.getThreadsByTopic(topicId));

  useFetchThreads(topicId);

  if (!threads || threads.length === 0) return;

  return (
    <Flexbox gap={1} paddingBlock={1}>
      {threads?.map((item, index) => (
        <ThreadItem
          id={item.id}
          index={index}
          isSubagent={item.type === ThreadType.Isolation}
          key={item.id}
          title={item.title}
        />
      ))}
    </Flexbox>
  );
});

ThreadList.displayName = 'ThreadList';

export default ThreadList;
