import React from 'react';
import Box from '@mui/material/Box';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import Avatar from '@mui/material/Avatar';
import Badge from '@mui/material/Badge';
import { useChat } from '../../contexts/ChatContext';

const ChatRoomList: React.FC = () => {
  const { rooms, selectedRoomToken, selectRoom } = useChat();

  return (
    <Box sx={{ overflow: 'auto', flex: 1 }}>
      <List disablePadding>
        {rooms.map((room) => {
          const isSelected = room.token === selectedRoomToken;
          return (
            <ListItem key={room.token} disablePadding>
              <ListItemButton
                selected={isSelected}
                onClick={() => selectRoom(room.token)}
                sx={{
                  py: 1,
                  px: 1.5,
                  '&.Mui-selected': {
                    backgroundColor: 'primary.light',
                    color: 'primary.contrastText',
                    '&:hover': {
                      backgroundColor: 'primary.main',
                    },
                    '& .MuiListItemIcon-root': {
                      color: 'primary.contrastText',
                    },
                    '& .MuiListItemText-secondary': {
                      color: 'primary.contrastText',
                      opacity: 0.7,
                    },
                  },
                }}
              >
                <ListItemIcon sx={{ minWidth: 40 }}>
                  <Badge
                    badgeContent={room.unreadMessages}
                    color="primary"
                    invisible={room.unreadMessages === 0}
                  >
                    <Avatar
                      sx={{
                        width: 32,
                        height: 32,
                        fontSize: '0.75rem',
                        bgcolor: isSelected ? 'primary.main' : 'action.hover',
                        color: isSelected ? 'primary.contrastText' : 'text.primary',
                      }}
                    >
                      {room.displayName.substring(0, 2).toUpperCase()}
                    </Avatar>
                  </Badge>
                </ListItemIcon>
                <ListItemText
                  primary={room.displayName}
                  primaryTypographyProps={{ noWrap: true, variant: 'subtitle2' }}
                  secondary={
                    room.lastMessage
                      ? `${room.lastMessage.author}: ${room.lastMessage.text}`
                      : undefined
                  }
                  secondaryTypographyProps={{ noWrap: true, variant: 'caption' }}
                />
              </ListItemButton>
            </ListItem>
          );
        })}
      </List>
    </Box>
  );
};

export default ChatRoomList;