import React from 'react';
import { Router, History } from 'react-router';
import reactMixin from 'react-mixin';
import { connect } from 'react-redux';
import { userService, channelService } from 'services';

class Loader extends React.Component {
  constructor() {
    super();
    this.state = {
      userError: null,
      channelError: null
    };
  }
  componentDidMount() {
    this.loadApp();
  }
  componentDidUpdate() {
    if (this.state.userError === false && this.state.channelError === false) {
      this.history.pushState(null, '/dashboard/');
    }
  }
  loadApp() {
    // Load user service
    userService.checkSession().then((user) => {
      if (user) {
        this.setState({userError: false});
      } else {
        this.setState({userError: 'Could not load user!'});
      }
    })
    .catch((e) => this.setState({userError: e}));
    // Load channels
    channelService.loadChannels()
    .then(() => this.setState({channelError: false}))
    .catch((e) => this.setState({channelError: e}));
    // Load content types
    channelService.loadContentTypes()
    .then(() => this.setState({contentTypeError: false}))
    .catch((e) => this.setState({contentTypeError: e}));
  }
  render() {
    return (
      <div className="pro-login">
        <div className="pro-login-wrap">
          <div className="pro-login-loader">
            <h3 className="pro-loader-title">Loading...</h3>
            <ul className="pro-loader-list">
              <li>
                <div className="pro-loader-list__label">User Service</div>
                <div className="pro-loader-list__status">Loading</div>
              </li>
              <li>
                <div className="pro-loader-list__label">Channel Service</div>
                <div className="pro-loader-list__status">Loading</div>
              </li>
              <li>
                <div className="pro-loader-list__label">Content Service</div>
                <div className="pro-loader-list__status">Loading</div>
              </li>
              <li>
                <div className="pro-loader-list__label">Quote Service</div>
                <div className="pro-loader-list__status">Loading</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    );
  }
}
reactMixin.onClass(Loader, History);
export default connect()(Loader);