'use client';

import { MediaDetails } from '@/lib/fetch';
import React, { useState } from 'react';
import { ChatList } from '../chat/ChatList';
import useVisionAgent from '@/lib/hooks/useVisionAgent';
import { nanoid } from '@/lib/utils';
import { useScrollAnchor } from '@/lib/hooks/useScrollAnchor';
import { Composer } from '../chat/Composer';
import { useAtomValue } from 'jotai';
import { selectedMediaIdAtom } from '@/state/media';

export interface ChatProps {
  mediaList: MediaDetails[];
}

const ProjectChat: React.FC<ChatProps> = ({ mediaList }) => {
  return <div>TO BE FIXED</div>;
  // const selectedMediaId = useAtomValue(selectedMediaIdAtom);
  // // fallback to the first media
  // const selectedMedia =
  //   mediaList.find(media => media.id === selectedMediaId) ?? mediaList[0];
  // const { messages, append, reload, stop, isLoading, input, setInput } =
  //   useVisionAgent({
  //     mediaUrl: selectedMedia.url,
  //     messages: [],
  //     userId: nanoid(),
  //   });
  // const { messagesRef, scrollRef, visibilityRef, isAtBottom, scrollToBottom } =
  //   useScrollAnchor();
  // return (
  //   <>
  //     <div className="h-full overflow-auto" ref={scrollRef}>
  //       <div className="pb-[200px] pt-4 md:pt-10" ref={messagesRef}>
  //         <ChatList messages={messages} session={null} isLoading={isLoading} />
  //         <div className="h-px w-full" ref={visibilityRef} />
  //       </div>
  //     </div>
  //     <div className="absolute inset-x-0 bottom-0 w-full h-[178px]">
  //       <Composer
  //         url={selectedMedia.url}
  //         isLoading={isLoading}
  //         stop={stop}
  //         append={append}
  //         reload={reload}
  //         messages={messages}
  //         input={input}
  //         setInput={setInput}
  //         isAtBottom={isAtBottom}
  //         scrollToBottom={scrollToBottom}
  //       />
  //     </div>
  //   </>
  // );
};

export default ProjectChat;