import React, { useEffect, useState } from 'react';
import { Form, Button, Row } from 'react-bootstrap';
// import axios from "axios";


function Chat(props) {
  // const [username, setUsername] = useState('')
  const username = localStorage.getItem('name');

  function handleChange(e) {
    e.preventDefault()
    props.setInner(e.target.value)
    console.log(e.target.value)
  }

  function sendMsgCH(e) {
    props.sendMsg(e)
  }

  // async function getLoginedUser() { //email로 db에서 찾아오기

  //   const userid = localStorage.getItem('user')
  //   const response = await axios.post(`/users/${userid}`, { 'email': userid })
  //   setUsername(response.data.username)
  // }
  
  // useEffect(() => {
  //   getLoginedUser()
  //   console.log('Chat에서 useEffect', username)
  // })
  
  return (

    <div className="chat" id="chat" style={{ border: "2px solid", height: "300%", margin: "1%", borderColor: "#BDBDBD" }}>
      <Button variant="light" onClick={props.handleChatc} >{`<`}</Button>
      <h2>현재 {props.roomName} 입니다.</h2>
      {      props.chatmsg.map((value, index) => (
        <Row key={index} className='ml-3'>
          {props.roomName}에서 {username}님이 보낸 메세지 : {value} 
        </Row>
      ))}

      <Form onSubmit={sendMsgCH}>
        <Form.Control name='msg' type='text' onChange={handleChange} />
        <Button variant="primary" type="submit">전송</Button>
      </Form>

    </div>


  );
}

export default Chat;