import React, { Component, Fragment } from "react";
import { FlatList, Button, Picker, Text, StyleSheet } from "react-native";

import LocationTracker from "./LocationTracker";

class GameList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      games: [],
      tracking: false,
      selectedGame: null,
      editForm: false
    };

    intervalID = 0;
  }

  componentDidMount() {
    this.getGames();
  }

  getGames() {
    fetch("http://172.20.2.110:5000/game/listgames")
      .then(response => response.json())
      .then(games => {
        this.setState({
          games,
          selectedGame: games[0]
        });
      })
      .catch(error => {
        console.log(error);
      });
  }

  handleTrackingChange() {
    this.setState({ tracking: !this.state.tracking });
  }

  startTracking() {
    this.intervalID = setInterval(() => {
      console.log("Valittu peli: " + this.state.selectedGame);
      console.log(
        "Nyt träkätää nim birusti peliä: " + this.state.selectedGame.name
      );
      console.log("Tracking: " + this.state.tracking);
    }, 3000);
  }

  stopTracking() {
    clearInterval(this.intervalID);
    console.log("Nyt lopetetaa seuranta.");
  }

  componentDidUpdate() {
    if (this.state.tracking) {
      this.startTracking();
    } else if (!this.state.tracking) {
      this.stopTracking();
    }
  }
  componentWillUnmount() {
    clearInterval(this.intervalID);
  }
  render() {
    if (this.state.games.length > 0) {
      const items = (
        <Fragment>
          <Picker
            style={styles.picker}
            selectedValue={this.state.selectedGame}
            onValueChange={(selectedGame, itemIndex) => {
              clearInterval(this.intervalID);
              this.setState({ selectedGame, tracking: "false" });
            }}
          >
            {this.state.games.map(game => (
              <Picker.Item label={game.name} value={game} />
            ))}
          </Picker>
          <LocationTracker
            tracking={this.state.tracking}
            handleTrackingChange={this.handleTrackingChange.bind(this)}
          />
        </Fragment>
      );
      return <Fragment>{items}</Fragment>;
    } else return null;
  }
}

const styles = StyleSheet.create({
  picker: {
    paddingVertical: 50
  }
});

export default GameList;