import { useState } from "react"
import { Message } from "./message"
import { MyDropzone } from "./dropzone"
import ScrollableFeed from 'react-scrollable-feed'
import { Link } from "react-router-dom"

const Chat = ({ chat_id, chat_title, chat_avatar, user_id, messages, onUpload, onSend }) => {
    let [msg, setMSG] = useState("")
    let [isUpload, setIsUpload] = useState(false)
    let [files, setFiles] = useState([])
    console.log(files)
    let filesHandler = (file) => {
        files.length ? setFiles([...files, file]) : setFiles([file])
    }

    let handler = (e) => {
        if ((e.key === "Enter" && !e.shiftKey) || e.type === "click") {
            onSend(chat_id, msg, files)
            setMSG("")
            e.preventDefault()
        }
    }

    return (
        <div className="chat-window">
            <div className="chat-nav">
                <span>{chat_title}</span>
            </div>

            <ScrollableFeed className="message-list" forceScroll>
                {messages.length > 0 && messages.map(message => <Message key={message._id} id={message._id} nick={message.owner.nick || message.owner.login} msg={message.text} date={message.createdAt} modified={message.modified} own={message.owner._id === user_id} />)}
            </ScrollableFeed>

            <div className="message-input">
                <textarea placeholder="Введите сообщение..." value={msg} onInput={(e) => setMSG(e.target.value)} onKeyDown={(e) => handler(e)} />
                <button onClick={() => setIsUpload(!isUpload)}>Прикрепить файл</button>
                {isUpload && <MyDropzone onUpload={onUpload} onSet={filesHandler} />}
                <button onClick={(e) => handler(e)}>Отправить</button>
            </div>
        </div>
    )
}



export default Chat