import { useEffect, useRef, useState } from "react"
import { connect } from "react-redux"
import { actionSendMessage, actionUpsertMSG } from "../../actions/actionsMessages"
import { InputAreaWrapper, TextArea} from "./InputArea.style";
import Plane from "./icons8-plane.png";
import MessageDropZone from "../DropZone/MessageDropZone/MessageDropZone";
import { actionAddDraftMessage, actionDeleteDraftMessageId, actionDeleteReplyMessageId, actionSetInputMessageValue } from "../../reducers/chatReducer";

import SendRoundedIcon from '@mui/icons-material/SendRounded';
import InputAreaMessageEditor from "./InputAreaMessageEditor";
import MessageReplyForwarded from "../MessageDraft/MessageReplyForwarded";


const InputArea = ({sendMessage, deleteDraftMessage, chatId, chats, setInputValue, modal: {content, isOpen}}) => {
    const message = chats[chatId]?.draft?.mainInputValue?.message;
    const inputValue = chats[chatId]?.draft?.mainInputValue?.value || '';
    const  replyMessageId =  message && message.hasOwnProperty('reply') ? message.reply?._id : null;
    const forwardedMessageId = message && message.hasOwnProperty('forwarded') ? message.forwarded?._id : null;

	return (chats[chatId]?.draft?.messageEditor && !chats[chatId]?.draft?.messageEditor?.message?.media) ? 
        <InputAreaMessageEditor chatId={chatId}/> 
        :
		<InputAreaWrapper>
            <MessageReplyForwarded chat={chats[chatId]}>
                
            </MessageReplyForwarded>
            
            <div style={{display: 'flex', alignItems: 'center', padding: '10px 0'}}>
                <MessageDropZone chatId={chatId}/>
                <TextArea
                    value={content === 'messageMediaModal' && isOpen ? '' : inputValue}         
                    onChange={e=>{setInputValue(chatId, e.target.value, 'mainInputValue')}}
                    maxRows={8}
                    disabled={forwardedMessageId ? true : false}
                    placeholder="Write a message..." 
                />
                {inputValue || forwardedMessageId ? 
                <SendRoundedIcon
                    style={{margin: '0 16px', cursor: "pointer"}}
                    color="primary"
                    onClick={
                        async() => {
                            let val = await sendMessage(null, chatId, forwardedMessageId ? 'forwarded message' : inputValue?.replace(/^\s+|\s+$/g, ''), null, replyMessageId, forwardedMessageId);
                            (val?.replyTo?._id || val?.forwarded?._id) && deleteDraftMessage(chatId, null)
                            val && !val?.forwarded?._id && setInputValue(chatId, "", 'mainInputValue')
                        }
                    }
                /> : <div></div>}
            </div>
        </InputAreaWrapper>
	
}

export default connect(state => ({chats: state.chats, modal: state?.modal}), {
    sendMessage: actionSendMessage,
    setInputValue: actionSetInputMessageValue,
    deleteDraftMessage: actionAddDraftMessage
})(InputArea);