import React from 'react'
import { ListGroup } from 'react-bootstrap';
import "../Pages/Home.css";

function OpenList(props) {

  function enterChatRoomCH(e) {
    if (props.roomCode) {
      props.closeChatRoom(props.roomCode)
    }
    const roomCode = e.target.name
    props.openListroom(roomCode)
    props.setRoomCode(roomCode)
  }

  return (
    <div style={{overflow: 'auto', height: "80vh"}}>
      {props.openlist.map((item, index) =>
        <ListGroup key={index}>
          <ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId} className='rounded-0'>
            {item.roomName}
          </ListGroup.Item>
        </ListGroup>
      )}
    </div>
  )
}

export default OpenList
