// src/components/ChatDrawer.tsx
import React, { Dispatch, SetStateAction } from 'react';
import { Conversation, ConversationType } from "../../data";
import { Button, Drawer, List, ListItem, ListItemText, Typography } from '@mui/material';
import ConversationCard from '../ConversationCard/ConversationCard';




interface ChatDrawerProps {
  conversations: Conversation[];
  setSelectConversation: Dispatch<SetStateAction<number | undefined>>; // state function to set the selected conversation
  deleteConversation: (conversation_id: number | undefined)=>void;
  selectedConversation: number | undefined;
}

const ConversationDrawer = ({ conversations, 
    setSelectConversation, 
    deleteConversation,
    selectedConversation
}: ChatDrawerProps): JSX.Element => {
  return (
    //<Drawer variant="temporary" anchor="left" hideBackdrop sx={{width: 320}}>
    <>
      <Button color={'inherit'} onClick={() => setSelectConversation(undefined)}>
        New Conversation
      </Button>
      <List>
        {/* {conversations.map((conversation) => (
          <ListItem
            button
            key={conversation.id}
            onClick={() => setSelectConversation(conversation.id)}
            sx={{
              backgroundColor: selectedConversation === conversation.id ? 'lightblue' : 'inherit',
            }}
          >
            <ListItemText primary={conversation.title} />
          </ListItem>
        ))} */}
        { conversations ? (
            conversations.map((conversation) => 
                <ConversationCard key={conversation.id} title={conversation.title} conversation_id={conversation.id} setSelectConversation={setSelectConversation} deleteConversation={deleteConversation} selectedConversation={selectedConversation}/>
            )
        ): (
            <p> Either select a previous conversation, or enter a prompt to start a new one.</p>
        )}
      </List>
    </>
    //</Drawer>
  );
};

export default ConversationDrawer;