import React from 'react';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Collapse from '@mui/material/Collapse';
import { ChatBoxState, ChatMessage, ChatUser, ChatResponsiveSettings, CallType } from '../../types/chat';
import ChatHeader from './ChatHeader';
import ChatMessages from './ChatMessages';
import ChatInput from './ChatInput';

interface ChatBoxProps {
  chatState: ChatBoxState;
  messages: ChatMessage[];
  currentUserId: number;
  loading?: boolean;
  typingUsers?: number[];
  responsiveSettings: ChatResponsiveSettings;
  rightOffset: number;
  hasMore?: boolean;
  onlineUsers?: Set<number>;
  onMinimize: () => void;
  onExpand: () => void;
  onClose: () => void;
  onSendMessage: (content: string) => void;
  onTyping?: (isTyping: boolean) => void;
  onLoadMore?: () => void;
  onCall?: (type: CallType) => void;
}

const ChatBox: React.FC<ChatBoxProps> = ({
  chatState,
  messages,
  currentUserId,
  loading = false,
  typingUsers = [],
  responsiveSettings,
  rightOffset,
  hasMore = false,
  onlineUsers,
  onMinimize,
  onExpand,
  onClose,
  onSendMessage,
  onTyping,
  onLoadMore,
  onCall,
}) => {
  const { conversation, minimized, position, unreadCount } = chatState;
  const { boxWidth, boxHeight, minimizedHeight } = responsiveSettings;

  // Get participants
  const participants: ChatUser[] = conversation?.participants || [];

  return (
    <Paper
      elevation={4}
      sx={{
        position: 'fixed',
        bottom: 0,
        right: rightOffset,
        width: boxWidth,
        height: minimized ? minimizedHeight : boxHeight,
        borderRadius: '8px 8px 0 0',
        overflow: 'hidden',
        display: 'flex',
        flexDirection: 'column',
        transition: 'height 0.2s ease-in-out, right 0.2s ease-in-out',
        zIndex: 1300 - position, // Higher z-index for rightmost boxes
      }}
    >
      <ChatHeader
        participants={participants}
        currentUserId={currentUserId}
        conversationName={conversation?.name}
        isGroup={conversation?.type === 'group'}
        minimized={minimized}
        unreadCount={unreadCount}
        onlineUsers={onlineUsers}
        onMinimize={onMinimize}
        onExpand={onExpand}
        onClose={onClose}
        onCall={onCall}
      />

      <Collapse in={!minimized} timeout={200}>
        <Box
          sx={{
            display: 'flex',
            flexDirection: 'column',
            height: boxHeight - minimizedHeight,
          }}
        >
          <ChatMessages
            messages={messages}
            currentUserId={currentUserId}
            participants={participants}
            loading={loading}
            typingUsers={typingUsers}
            hasMore={hasMore}
            onLoadMore={onLoadMore}
          />
          <ChatInput
            onSend={onSendMessage}
            onTyping={onTyping}
            disabled={!conversation}
          />
        </Box>
      </Collapse>
    </Paper>
  );
};

export default ChatBox;