/* eslint-disable -- temporary disable for development/testing purposes */

'use client';
import * as React from 'react';
import {
  Avatar,
  Card,
  Stack,
  Typography,
  List,
  ListItem,
  ListItemAvatar,
  ListItemText,
  Divider
} from '@mui/material';

import type { Chat } from './../../../app/dashboard/chats/chats-client';
import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
import ImageIcon from '@mui/icons-material/Image';

interface ChatListProps { 
    receiverId?:string | null;
    role?:string | null;
    receiverName?:string | null;


    chats: Chat[];
    onChatClick: (chatInfo: { chatId: string; receiverId: string; role: string; receiverName: string }) => void;
    selectedChatId?: string | null;
  }
  export function ChatList({ chats, onChatClick, selectedChatId }: ChatListProps): React.JSX.Element {
    return (
      <Card>
      <List>
  {chats.map((chat, index) => {
    const lastMessage = chat.lastMessage?.toLowerCase() || '';

    const isImage =
      lastMessage.endsWith('.jpg') ||
      lastMessage.endsWith('.jpeg') ||
      lastMessage.endsWith('.png') ||
      lastMessage.endsWith('.gif');

    const isPDF = lastMessage.endsWith('.pdf');

    const renderLastMessage = () => {
      if (isImage) {
        return (
          <Stack direction="row" alignItems="center" spacing={0.5}>
            <ImageIcon fontSize="small" color="action" />
            <Typography variant="body2" color="textSecondary">
              Image
            </Typography>
          </Stack>
        );
      } else if (isPDF) {
        return (
          <Stack direction="row" alignItems="center" spacing={0.5}>
            <InsertDriveFileIcon fontSize="small" color="action" />
            <Typography variant="body2" color="textSecondary">
              PDF
            </Typography>
          </Stack>
        );
      } else {
        return (
          <Typography variant="body2" color="textSecondary">
            {chat.lastMessage}
          </Typography>
        );
      }
    };

    return (
      <React.Fragment key={chat.chat_id}>
        <ListItem
          button
          onClick={() =>
            onChatClick({
              chatId: chat.chat_id,
              receiverId: chat.receiver_id,
              role: chat.role,
              receiverName: chat.name,
            })
          }
        >
          <ListItemAvatar>
            <Avatar src={chat.avatar} />
          </ListItemAvatar>
          <ListItemText
            primary={
              <Stack direction="row" justifyContent="space-between">
                <Typography variant="subtitle1">{chat.name}</Typography>
                <Typography variant="caption">
                  {new Date(chat.lastMessageTime).toLocaleTimeString([], {
                    hour: '2-digit',
                    minute: '2-digit',
                  })}
                </Typography>
              </Stack>
            }
            secondary={renderLastMessage()}
          />
        </ListItem>
        {index < chats.length - 1 && <Divider variant="inset" component="li" />}
      </React.Fragment>
    );
  })}
</List>
      </Card>
    );
  }