import React, { Fragment, useEffect, useState } from 'react';
import { TextField, Button } from '@material-ui/core';
import {makeStyles} from '@material-ui/core/styles';
import {useDispatch, useSelector} from 'react-redux';

const cssStyles = makeStyles((theme) => ({
    root:{
        marginTop:"20px",
        textAlign:"right",
        '& button' :{
            marginTop:"20px"
        }
    }
}))

function ReplyComponent(props) { //Accept thread ID or whole comment object?
    const commentsData = useSelector(currentState => currentState.commentsReducer);

    const [message,setMessage] = useState({userMessage:""});
    const dispatch = useDispatch();
    const useCss = cssStyles();

    const handleMessageEvent = (event)=>{
        const {name, value} = event.target;
        setMessage((currentState)=>({
            ...currentState,
            [name]: value
        }));
    }

    function addCommentDB(){
        let temp = commentsData.data.find((value)=> value._id == props.root);
        console.log(JSON.stringify(temp));
        debugger;
    }
    const submitReplyEvent = ()=>{
        const reduxPayload = {
            comment: message.userMessage,
            author: "replying User",
            parent: props.id
        }
        dispatch({
            type: "ADD_COMMENT",
            payload: reduxPayload
        });
        debugger;

        addCommentDB();
    }

    return (
        <Fragment>
            <div className={useCss.root}>

                <TextField onChange={handleMessageEvent} id="message-input" rows="8" multiline={true} aria-describedby="message-helper-text" fullWidth variant="outlined" label="Message" name="userMessage" />
                <Button onClick={submitReplyEvent}>Send reply</Button>
                <pre>{JSON.stringify(commentsData, null, 2) }</pre>

            </div>
        </Fragment>
    )
}

export default ReplyComponent;