content: import React from 'react';
  import io from 'socket.io-client';
  import Map from '../../components/Map';
  import { ConfigModal, PokemonModal } from '../../components/Modal';
  import './style.css';
  
  let noop = () => {
    console.log('no op');
  };
  
  class HomePage extends React.Component {
    constructor(props) {
      super(props);
      noop = noop.bind(this);
  
      // bind dom callbacks to `this` component
      this.handleChangeConfigModal = this.handleChangeConfigModal.bind(this);
      this.handleSaveConfigModal = this.handleSaveConfigModal.bind(this);
      this.handleClickSettings = this.handleClickSettings.bind(this);
      this.handleClickPokemon = this.handleClickPokemon.bind(this);
      this.handleCloseModal = this.handleCloseModal.bind(this);
      this.handleTransferPokemon = this.handleTransferPokemon.bind(this);
      this.handleFavoritePokemon = this.handleFavoritePokemon.bind(this);
    }
    componentWillMount() {
      const defaults = {
        candy: {},
        currentModal: 'config',
        eggs_count: 0,
        followPlayer: true,
        isConnected: false,
        isInitialized: false,
        level: 0,
        player: {},
        pokemon: [],
        pokemonCaught: [],
        pokestops: [],
        position: [],
        positions: [],
        socketUrl: 'http://localhost:8000',
        storage: {},
        username: 'Anonymous',
      };
  
      let state = localStorage.getItem('OpenPoGoUI');
  
      if (state) {
        state = JSON.parse(state);
      } else {
        state = { ...defaults };
      }
  
      this.state = state;
    }
    componentDidMount() {
      this.initSocket();
      this.socket.emit('pokemon_list');
    }
    componentWillUnmount() {
      this.socket.disconnect();
    }
    getModal(state) {
      switch (state.currentModal) {
        case 'pokemon':
          return (
            <PokemonModal
              handleClose={this.handleCloseModal}
              handleFavoritePokemon={this.handleFavoritePokemon}
              handleTransferPokemon={this.handleTransferPokemon}
              pokemon={state.pokemon}
            />
            );
        case 'eggs':
          return (
            <ConfigModal
              followPlayer={state.followPlayer}
              handleChange={this.handleChangeConfigModal}
              handleClose={this.handleCloseModal}
              handleSave={this.handleSaveConfigModal}
              socketUrl={state.socketUrl}
            />
            );
        case 'items':
          return (
            <ConfigModal
              followPlayer={state.followPlayer}
              handleChange={this.handleChangeConfigModal}
              handleClose={this.handleCloseModal}
              handleSave={this.handleSaveConfigModal}
              socketUrl={state.socketUrl}
            />
            );
        case 'config':
          return (
            <ConfigModal
              followPlayer={state.followPlayer}
              handleChange={this.handleChangeConfigModal}
              handleClose={this.handleCloseModal}
              handleSave={this.handleSaveConfigModal}
              socketUrl={state.socketUrl}
            />
            );
        default:
          return null;
      }
    }
    handleChangeConfigModal(event) {
      const { target } = event;
      const state = {};
      if (target.type === 'checkbox' || target.type === 'radio') {
        state[target.name] = target.checked;
      } else {
        state[target.name] = target.value;
      }
  
      this.setState(state);
    }
    handleSaveConfigModal() {
      if (this.socket.io.uri !== this.state.socketUrl) {
        this.socket.disconnect();
        localStorage.setItem('socketUrl', this.state.socketUrl);
        this.initSocket();
      }
    }
    handleClickPokemon() {
      this.setState({
        currentModal: this.state.currentModal !== 'pokemon' ? 'pokemon' : null,
      });
    }
    handleClickSettings() {
      this.setState({
        currentModal: this.state.currentModal !== 'config' ? 'config' : null,
      });
    }
    handleCloseModal(event) {
      if (event.target !== event.currentTarget) {
        return;
      }
  
      console.dir(event);
      this.setState({ currentModal: null });
    }
    handleTransferPokemon(id) {
      console.log('transfer_pokemon', id);
      this.socket.emit('transfer_pokemon', { id });
    }
    handleFavoritePokemon(id, favorite) {
      console.log('favorite_pokemon', id, favorite);
      this.socket.emit('favorite_pokemon', { id, favorite });
    }
    initSocket() {
      const self = this;
      this.socket = io(`${this.state.socketUrl}/event`);
  
      this.socket.on('connect', (message) => {
        console.log('connect', message);
        self.setState({ isConnected: true, currentModal: null });
      });
  
      this.socket.on('disconnect', (message) => {
        console.log('disconnect', message);
        self.setState({ isConnected: false });
      });
  
      this.socket.on('bot_initialized', (message) => {
        const state = {
          position: message.coordinates,
          positions: [message.coordinates],
          player: {
            ...message.player,
            username: message.username,
          },
          storage: message.storage,
          isInitialized: true,
        };
  
        console.log('bot_initialized', message, state);
  
        self.setState(state);
      });
  
      this.socket.on('pokemon_settings', (message) => {
        console.log('pokemon_settings', message);
        self.setState(message);
      });
  
      this.socket.on('player_stats', (message) => {
        console.log('player_stats', message);
        self.setState(message);
      });
  
      this.socket.on('position', (message) => {
        console.log('position', message);
        const state = {
          positions: [...self.state.positions, message.coordinates],
          position: message.coordinates,
        };
  
        self.setState(state);
      });
  
      this.socket.on('pokestops', (message) => {
        console.log('pokestops', message);
        self.setState(message);
      });
  
      this.socket.on('pokestops_visited', (message) => {
        console.log('pokestops_visited', message);
        self.setState(message);
      });
  
      this.socket.on('pokemon_caught', (message) => {
        const pokemon = { ...message.pokemon, ...message.position };
        console.log('pokemon_caught', message, pokemon);
        self.setState({ pokemonCaught: [...self.state.pokemonCaught, pokemon] });
        self.socket.emit('pokemon_list'); // fetch new list
      });
  
      this.socket.on('transfered_pokemon', (message) => {
        console.log('transfered_pokemon', message);
        self.socket.emit('pokemon_list'); // fetch new list
      });
  
      this.socket.on('pokemon_evolved', (message) => {
        const monster = { ...message.pokemon, evolution: message.evolution };
        console.log('pokemon_evolved', message, monster);
        self.socket.emit('pokemon_list'); // fetch new list
      });
  
      this.socket.on('inventory_list', (message) => {
        console.log('inventory_list', message);
        self.setState(message);
      });
  
      this.socket.on('pokemon_list', (message) => {
        const state = { ...message };
        state.pokemon = state.pokemon.map(pokemon => (
          {
            ...pokemon,
            favorite: pokemon.favorite === 'True',
          }
        ));
        console.log('pokemon_list', state);
        self.setState(state);
      });
  
      this.socket.on('eggs_list', (message) => {
        console.log('eggs_list', message);
        self.setState(message);
      });
  
      this.socket.on('pokemon_found', (message) => {
        console.log('pokemon_found', message);
        self.setState(message);
      });
  
      this.socket.on('player_update', (message) => {
        console.log('player_update', message);
        self.setState(message);
      });
    }
    render() {
      localStorage.setItem('OpenPoGoUI', JSON.stringify(this.state));
  
      const {
        followPlayer,
        isInitialized,
        player,
        pokemonCaught,
        pokestops,
        position,
        positions,
      } = this.state;
  
      let map = isInitialized > 0 ?
        <Map
          followPlayer={followPlayer}
          handleClickAvatar={noop}
          handleClickEggs={noop}
          handleClickInventory={noop}
          handleClickPokemon={this.handleClickPokemon}
          handleClickSettings={this.handleClickSettings}
          player={player}
          pokemonCaught={pokemonCaught}
          pokestops={pokestops}
          position={position}
          positions={positions}
        /> : null;
  
      let modal = this.getModal(this.state);
  
      return (
        <div className="wrapper">
          {map}
          {modal}
        </div>
      );
    }
  
  }
  
  export default HomePage;
  