import React from 'react';
import PageLead from 'misago/components/page-lead' // jshint ignore:line
import List from 'misago/components/users/rank/list' // jshint ignore:line
import ListLoading from 'misago/components/users/rank/list-loading' // jshint ignore:line
import misago from 'misago/index';
import { hydrate } from 'misago/reducers/users';
import polls from 'misago/services/polls';
import store from 'misago/services/store';
import title from 'misago/services/page-title';

export default class extends React.Component {
  constructor(props) {
    super(props);

    if (misago.has('USERS')) {
      this.initWithPreloadedData(misago.pop('USERS'));
    } else {
      this.initWithoutPreloadedData();
    }

    this.startPolling(props.params.page || 1);
  }

  initWithPreloadedData(data) {
    this.state = Object.assign(data, {
      isLoaded: true
    });
    store.dispatch(hydrate(data.results));
  }

  initWithoutPreloadedData() {
    this.state = {
      isLoaded: false
    };
  }

  startPolling(page) {
    polls.start({
      poll: 'rank-users',
      url: misago.get('USERS_API'),
      data: {
        rank: this.props.route.rank.id,
        page: page
      },
      frequency: 90 * 1000,
      update: this.update
    });
  }

  /* jshint ignore:start */
  update = (data) => {
    store.dispatch(hydrate(data.results));

    data.isLoaded = true;
    this.setState(data);
  };
  /* jshint ignore:end */

  componentDidMount() {
    title.set({
      title: this.props.route.rank.name,
      page: this.props.params.page || null,
      parent: gettext("Users")
    });
  }

  componentWillUnmount() {
    polls.stop('rank-users');
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.params.page !== nextProps.params.page) {
      title.set({
        title: this.props.route.rank.name,
        page: nextProps.params.page || null,
        parent: gettext("Users")
      });

      this.setState({
        isLoaded: false
      });

      polls.stop('rank-users');
      this.startPolling(nextProps.params.page);
    }
  }

  getClassName() {
    if (this.props.route.rank.css_class) {
      return 'rank-users-list rank-users-' + this.props.route.rank.css_class;
    } else {
      return 'rank-users-list';
    }
  }

  getRankDescription() {
    if (this.props.route.rank.description) {
      /* jshint ignore:start */
      return <div className="rank-description">
        <PageLead copy={this.props.route.rank.description.html} />
      </div>;
      /* jshint ignore:end */
    } else {
      return null;
    }
  }

  getComponent() {
    if (this.state.isLoaded) {
      if (this.state.count > 0) {
        /* jshint ignore:start */
        let baseUrl = misago.get('USERS_LIST_URL') + this.props.route.rank.slug + '/';
        return <List baseUrl={baseUrl}
                     users={this.props.users}
                     {...this.state} />;
        /* jshint ignore:end */
      } else {
        /* jshint ignore:start */
        return <p className="lead">
          {gettext("There are no users with this rank at the moment.")}
        </p>;
        /* jshint ignore:end */
      }
    } else {
      /* jshint ignore:start */
      return <ListLoading />;
      /* jshint ignore:end */
    }
  }

  render() {
    /* jshint ignore:start */
    return <div className={this.getClassName()}>
      <div className="container">
        {this.getRankDescription()}
        {this.getComponent()}
      </div>
    </div>;
    /* jshint ignore:end */
  }
}