import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchChatHistory } from '../store/slices/inboxSlice';
import { Ellipsis, Send } from 'lucide-react';
import { Button, Form } from 'react-bootstrap';
import ChatInput from './ChatInput';

export default function ChatWindow({ onOpenChatDetails }) {
    const { selectedChat, chatStatus } = useSelector((state) => state.inbox);
    const [activePlatform, setActivePlatform] = useState('email');
    const dispatch = useDispatch();
    const [message, setMessage] = useState('');

    const platformOptions = [
        {
            name: 'Email',
            value: 'email',
        },
        {
            name: 'WhatsApp',
            value: 'whatsapp',
        },
    ];

    const handlePlatformChange = (value) => {
        setActivePlatform(value);
    };

    useEffect(() => {
        if (selectedChat) {
            console.log(selectedChat);
        }
    }, [selectedChat]);

    const handleSendMessage = (e) => {
        e.preventDefault();
        console.log(e.target.message.value);
    };

    return (
        <div className='chat-window'>
            <div className='chat-window-header'>
                <div className='chat-window-header-left'>
                    <div className='chat-window-header-left-avatar'>
                        <img src={selectedChat.avatar} alt='avatar' />
                    </div>
                    <div className='chat-window-header-left-info'>
                        <div
                            className='chat-window-header-left-info-name fw-bold'
                            onClick={onOpenChatDetails}
                        >
                            {selectedChat.name}
                        </div>
                    </div>
                </div>
                <div className='chat-window-header-right'>
                    <div className='platform-selection'>
                        {platformOptions.map((option) => (
                            <div
                                key={option.value}
                                className={`platform-selection-item ${activePlatform === option.value ? 'active' : ''}`}
                                onClick={() => handlePlatformChange(option.value)}
                            >
                                {option.name}
                            </div>
                        ))}
                    </div>
                    <div className='actions'>
                        <Ellipsis />
                    </div>
                </div>
            </div>
            <div className='chat-window-body'>
                <div className='chat-body'>
                    {selectedChat?.chatHistory?.length > 0 &&
                        selectedChat?.chatHistory?.map((msg) => (
                            <div key={msg.id} className={`message ${msg.role === 'user' ? 'user' : 'assistant'}`}>
                                {msg.content}
                            </div>
                        ))}
                </div>
            </div>
            <div className='chat-window-footer'>
                <Form className='footer-input' onSubmit={handleSendMessage}>
                    <ChatInput value={message} onChange={(e) => setMessage(e.target.value)} />
                    <Button variant='outline-primary' className='border-0' type='submit'>
                        <Send />
                    </Button>
                </Form>
            </div>
        </div>
    );
}