import React from 'react'
import { Badge, ListGroup } from 'react-bootstrap';

function ClosedList(props) {

  function enterChatRoomCH(e) {
    if (props.roomCode) {
      props.closeChatRoom(props.roomCode)
    }
    const roomCode = e.target.name
    const roomName = e.target.value
    props.enterChatRoom(roomCode)
    props.setRoomCode(roomCode)
    props.setRoomName(roomName)

  }

  return (
    <div style={{height: "80vh"}}>
    <div style={{overflow: 'auto', height:"100%"}}>
      {props.closedlist.map((item, index) =>
        <ListGroup key={index}>
          <ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId} value={item.roomName}>
            {item.roomName}
            {/* {[index] ? <Badge className='ml-2' pill variant='danger'>{unreadnumber[index]}</Badge> : ''} */}
          </ListGroup.Item>
        </ListGroup>
      )
      }
    </div >
    </div>
  )
}

export default ClosedList