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

import classnames from 'classnames';
import styles from './index.module.sass';

import { FullWidth } from '../../components/Layout';
import Loader from '../../components/Loader';
import Button from '../../components/Button';

import GameScene from './scenes/GameScene';
import Countdown from './components/Countdown';
import WelcomeTutorial from './components/WelcomeTutorial';

import Flag from '../../assets/icons/flag.png';
import FlagBg from '../../assets/icons/flag-data.png';
import Mode from '../../assets/icons/mode.png';

import socket from '../../initialization/sockets';

class GameScreen extends Component {
  constructor() {
    super();

    this.state = {
      gameRequested: false,
      game: null,
      autostart: false,
    };

    this.startGame = this.startGame.bind(this);
    this.handleScroll = this.handleScroll.bind(this);
    this.requestGameData = this.requestGameData.bind(this);
  }

  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
    this.handleScroll();
    this.requestGameData();
  }

  requestGameData() {
    const { id } = this.props;

    if (id === null ) {
      this.setState({ gameRequested: true, game: 'empty' });
    }

    socket.emit('requestGameData', id);
    socket.on('sendGameData', (data) => {
      if (data.id === this.props.id || data.id.toString() === this.props.id) {
        let game = data.game;

        console.log(game.players[0].place)
        this.setState({ gameRequested: true, game, autostart: data.autostart }, () => {
          console.log("callback", this.state.game.players[0].place)
        });
      }
    });
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
    socket.off('sendGameData');
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.id && nextProps.id !== this.props.id) {
      socket.emit('requestGameData', nextProps.id);
    }
  }

  startGame() {
    const { id } = this.props;
    socket.emit('startGameManually', id);
  }

  handleScroll() {
    if (!this.fixedButton || !this.gameContainer) { return; }
    const windowHeight = window.innerHeight;
    const bottomContainer = this.gameContainer.getBoundingClientRect().bottom;


    if (bottomContainer < windowHeight) {
      this.fixedButton.classList.add(styles.position);
    } else {
      this.fixedButton.classList.remove(styles.position);
    }
  }

  render() {
    const { game, gameRequested, autostart } = this.state;
    const { user, id, toggleSidebar, sidebarOpen, empty } = this.props;

    return (
      gameRequested
        ? game
          ? (
            <FullWidth setRef={(el) => { this.gameContainer = el; }} customClass={styles.container}>
              { game.stage === 0 && <Countdown {...{ game}} /> }
              { game === 'empty'
                ? <GameScene empty />
                : <GameScene {...{ game, user, autostart }} />
              }
              <div
                ref={(el) => { this.fixedButton = el; }}
                className={styles.gameData}
              >
                { id !== null &&
                  <React.Fragment>
                    <div className={styles.gameDataItem}>
                      <img className={styles.gameDataFlag} src={FlagBg} alt=""/>
                      <img className={styles.gameDataIcon} src={Flag} alt="" />
                      <div className={styles.gameDataText}>
                        Game: #{id}
                        <p className={styles.gameDataDetails}>
                          Created:&nbsp;
                          {moment(game.createdAt).format("MM/DD/YY")}
                        </p>
                      </div>
                    </div>
                    <div className={styles.gameDataItem}>
                      <img className={styles.gameDataFlag} src={FlagBg} alt=""/>
                      <img className={styles.gameDataIcon} src={Mode} alt="" />
                      <div className={styles.gameDataText}>
                        Mode
                        <p className={styles.gameDataDetails}>off-chain</p>
                      </div>
                    </div>
                  </React.Fragment>
                }
                {(game.stage === 0 || game === 'empty') &&
                  <Button
                    customClass={styles.joinButton}
                    onClick={toggleSidebar}
                  >
                    Join Race
                    <img className={styles.flag} src={Flag} alt="" />
                  </Button>
                }
              </div>
              { (game.stage === 0 || game === 'empty') && (user.totalGames === 0 || user.account === 'Guest') &&
                <WelcomeTutorial sidebarOpen={sidebarOpen} />
              }
            </FullWidth>
          )
          : <p>We could not retrive data for game {id}</p>
        : (
          <div>
            <p>Loading game #{id}</p>
            <Loader />
          </div>
        )
    );
  }
}

function mapStateToProps(state) {
  return {
    user: state.user,
  };
}

export default connect(mapStateToProps)(GameScreen);