import React, { useState } from 'react'

import { makeStyles } from '@material-ui/core/styles'
import TextField from '@material-ui/core/TextField'
import Paper from '@material-ui/core/Paper'
import List from '@material-ui/core/List'
import ListItem from '@material-ui/core/ListItem'
import ListItemText from '@material-ui/core/ListItemText'
import ListItemAvatar from '@material-ui/core/ListItemAvatar'
import Avatar from '@material-ui/core/Avatar'
import ImageIcon from '@material-ui/icons/Image'

import Divider from '@material-ui/core/Divider'

const useStyles = makeStyles(theme => ({
  container: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
  },
  dense: {
    marginTop: theme.spacing(2),
  },
  menu: {
    width: 200,
  },
}))

export default function OutlinedTextFields() {
  const classes = useStyles()
  const [chatHistory, setChatHistory] = useState([])

  const handleKeyDown = e => {
    if (e.key === 'Enter') {
      const data = document.getElementById('chat-input').value
      setChatHistory(chatHistory => createRow(data))
      document.getElementById('chat-input').value = ''
      e.preventDefault()
    }
  }

  const createRow = value => {
    return (
      <ListItem style={{ padding: '0 0 0 20px' }}>
        <ListItemAvatar>
          <Avatar>
            <ImageIcon />
          </Avatar>
        </ListItemAvatar>
        <ListItemText primary="Braymen" secondary={value} />
      </ListItem>
    )
  }

  return (
    <Paper style={{ backgroundColor: 'rgba(0,0,0, .1)' }}>
      <h2
        style={{
          marginBottom: 0,
          paddingTop: '15px',
          textAlign: 'center',
        }}
      >
        Chat Room
      </h2>

      <List className={classes.root}>{chatHistory}</List>

      <form className={classes.container} noValidate autoComplete="off">
        <TextField
          id="chat-input"
          label="Type a message and hit enter!"
          defaultValue=""
          className={classes.textField}
          margin="normal"
          variant="filled"
          fullWidth
          onKeyDown={handleKeyDown}
        />
      </form>
    </Paper>
  )
}