import React from 'react'
import { Button } from 'react-bootstrap'

const Sidebar = props => {
  const {
    activateChat,
    chats,
    allUsers,
    countUnreadMessages,
    allNamespaces,
  } = props
  return (
    <div
      className="d-flex flex-column col-sm-2 bg-dark text-light p-2"
      id="sidebar2"
    >
      <h5 className=" border-bottom pb-2">Chats</h5>
      <Button
        key="/"
        className="btn btn-dark d-flex"
        onClick={() => activateChat('/')}
      >
        <div className="mr-auto">server</div>
        {/*<div className="ml-auto">{allUsers.length}</div>*/}
      </Button>
      {chats.map(c => (
        <Button
          key={c}
          className="btn btn-dark d-flex"
          onClick={() => activateChat(c)}
        >
          <div
            className={`mr-auto ${
              countUnreadMessages(c) > 0 ? 'text-danger' : ''
            }`}
          >
            {c[0] === '#' || !allUsers.find(u => u.socketId === c)
              ? c
              : allUsers.find(u => u.socketId === c)['nick']}
          </div>
          {countUnreadMessages(c) > 0 ? (
            <div className="mr-auto badge bg-danger">
              {countUnreadMessages(c)}
            </div>
          ) : null}
          {/* user count for channels */}
          {c[0] === '#' &&
          allNamespaces &&
          allNamespaces.find(n => n.namespace === c) ? (
            <div className="ml-auto">
              {allNamespaces.find(n => n.namespace === c).sockets.length}
            </div>
          ) : null}
        </Button>
      ))}
    </div>
  )
}

export default Sidebar