'use strict';

import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';

import {changeRoute} from '../../common/actions/navigation.action';
import {login, updateLoginField} from '../../common/actions/user.action';
import {BG_IMAGES} from '../../common/constants/backgrounds';
import Login from '../../components/Login';

class StartScreen extends Component {
  constructor(props) {
    super(props);
    this._handleLogin = this._handleLogin.bind(this);
    this._handleLoginFieldChange = this._handleLoginFieldChange.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    var user_reducer = nextProps.user_reducer;
    if (user_reducer.error) {
      this._showSnackBar(user_reducer.error.message);
      return;
    }

    if (user_reducer.profile && user_reducer.profile.user.status === 'authenticated') {
      this.props.dispatch(changeRoute('/dashboard'));
    }
  }

  componentDidMount() {
    this._setBackGround();
    componentHandler.upgradeDom();
  }

  _handleLogin() {
    var login_profile = this.props.user_reducer.login_profile;
    if (!login_profile.username || !login_profile.password || !login_profile.phone_ext) {
      this._showSnackBar('Username, Password, and Phone Extension are required!');
      return;
    }

    this.props.dispatch(login(login_profile.username, login_profile.password, login_profile.phone_ext));
  }

  _handleLoginFieldChange(field, event) {
    this.props.dispatch(updateLoginField(field, event.target.value));
  }

  _setBackGround() {
    function getRandomBGPhoto() {
      var photo_number = Math.floor(Math.random() * BG_IMAGES.length);
      return BG_IMAGES[photo_number];
    }

    let login_container = document.getElementById('login-container');
    login_container.style.background = 'url(' + getRandomBGPhoto() + ') top center no-repeat';
    login_container.style.backgroundSize = 'cover';
  }

  _showSnackBar(message) {
    var data = {
      message: message,
      timeout: 3500
    };
    var snackbarContainer = document.querySelector('#login-snack-bar');
    snackbarContainer.MaterialSnackbar.showSnackbar(data);
  }

  render() {
    const {user_reducer} = this.props;

    return (
      <div>
        <Login hotKeyMap={user_reducer.key_map}
               loading={user_reducer.loading}
               username={user_reducer.login_profile.username}
               password={user_reducer.login_profile.password}
               phone_ext={user_reducer.login_profile.phone_ext}
               handleLoginFieldChange={this._handleLoginFieldChange}
               handleLogin={this._handleLogin}/>
      </div>
    );
  }
}

StartScreen.propTypes = {
  dispatch: PropTypes.func.isRequired
};

function mapStateToProps(state) {
  const {user_reducer} = state;
  return {
    user_reducer
  };
}

export default connect(mapStateToProps)(StartScreen);