import React, { Component } from 'react';
import Infinite from 'react-infinite';
import pure from 'pure-render-decorator';
import UserListItem from './UserListItem';

@pure
export default class UserList extends Component {
  state = {
    height: window.innerHeight - 100
  }

  componentDidMount() {
    window.addEventListener('resize', this.handleResize);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize);
  }

  handleResize = () => {
    this.setState({ height: window.innerHeight - 100 });
  }

  render() {
    const { tab, openPrivateChat, select } = this.props;
    const users = [];
    const style = {};

    if (!tab.channel) {
      style.display = 'none';
    } else {
      this.props.users.forEach(user => {
        users.push(
          <UserListItem
            key={user.nick}
            user={user}
            tab={tab}
            openPrivateChat={openPrivateChat}
            select={select}
          />
        );
      });
    }

    return (
      <div className="userlist" style={style}>
        <Infinite containerHeight={this.state.height} elementHeight={24}>
          {users}
        </Infinite>
      </div>
    );
  }
}