import React, { Fragment, useState, useCallback } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import withWidth, { isWidthUp } from '@material-ui/core/withWidth'
import _ from "lodash"
import ChatCard from '../atoms/ChatCard'
import TextField from '@material-ui/core/TextField';
import { Button } from '@material-ui/core';
import IconAdd from '@material-ui/icons/Add';
import ArrowUpwardIcon from '@material-ui/icons/ArrowUpward';
import { useDispatch } from 'react-redux';
import { useSelector } from 'react-redux'


const useStyles = makeStyles(theme => ({
    card: {
        width: '100%',
    },
    wrapper: {
        minHeight: '100%',
    },
    contain: {
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        [theme.breakpoints.up('md')]: {
            padding: '2vh 18vw',
        },
    },
    push: {
        height: '50px'
    },
    foot: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        [theme.breakpoints.up('md')]: {
            padding: '2vh 18vw',
        },
    },
    chat: {

    },
    filterForm: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        backgroundColor: theme.palette.input.main,
        padding: theme.spacing(1),
        width: '100%',
        [theme.breakpoints.up('md')]: {
            padding: theme.spacing(3),
        },
    },
    button: {
        backgroundColor: 'inherit',
        borderRadius: '0',
        '& svg': {
            fontSize: '1.5rem',
            [theme.breakpoints.up('sm')]: {
                fontSize: '2rem',
            },
        }
    },
    icon: {
        color: theme.palette.secondary.main,
        background: theme.palette.primary.important,
        padding: theme.spacing(1),
        borderRadius: '50%',
    },
    video: {
        display: 'flex',
        flexDirection: 'column',
        height: '11vh',
    },
    title: {
        fontSize: '1em',
        fontWeight: '500',
    },
    titleBorder: {
        '&:after': {
            content: '""',
            width: '15px',
            borderBottom: 'solid 2px',
            borderColor: theme.palette.primary.main + '!important',
            display: 'flex',
        },
    },
}));


function Chat(props) {
    const classes = useStyles();
    const [text, setText] = useState("");
    const dispatch = useDispatch()

    const messages = useSelector(state => state.answer.messages);
    const loadingMessage = useSelector(state => state.answer.loadingMessage);

    const sendMessage = useCallback(
        (message) => dispatch({ type: 'POST_MESSAGE_ANSWER_REQUEST', payload: { answerId: props.answerId, message: message } }),
        [dispatch]
    )

   const postMessage = () => {
        sendMessage(text);
        setText('');
    }

    return (
        <Fragment>
            <div className={classes.wrapper}>
                <div className={classes.contain}>
                    {
                            _.orderBy(messages, ['c_time'], ['asc']).map((message, index) => {
                                return <ChatCard message={message} key={index}></ChatCard>
                            })
                    }

                </div>
            </div>
            <div id="F" className={classes.foot}>
                <div className={classes.filterForm}>
                    <TextField
                        fullWidth
                        multiline
                        rows={isWidthUp('md', props.width) ? 8 : 1}
                        id="standard-search"
                        name="chattext"
                        value={text}
                        onChange={(e) => setText(e.target.value)}
                        placeholder={"Message"}
                        className={classes.textField}
                        InputLabelProps={{
                            shrink: true,
                        }}
                    />
                    <Button onClick={()=>postMessage()}
                        disabled={loadingMessage}
                        variant="contained"
                        className={classes.button}>
                        <ArrowUpwardIcon className={classes.icon}/>
                    </Button >
                </div>
            </div>

        </Fragment>
    );
}

export default withWidth()(Chat)