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

import LocationTracker from "./LocationTracker";
import PasswordPopup from "./PasswordPopup";
import MessagePopup from "./MessagePopup";

class GameList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      factions: [],
      games: [],
      tracking: false,
      selectedGame: null,
      selectedFaction: null,
      factionPassword: null,
      passwordPopupVisible: false,
      messagePopupVisible: false,
      message: "",
      messageTitle: "",
      editForm: false,
      userLocation: {
        latitude: null,
        longitude: null,
        latitudeDelta: null,
        longitudeDelta: null
      }
    };

    intervalID = 0; // Used for starting and stopping the tracking ticks
  }

  componentDidMount() {
    this.getGames();
  }

  setPopupVisible(popup, visible) {
    this.setState({ [popup]: visible });
  }

  // Get all the games from the server and set the state to the first game
  async getGames() {
    await fetch("https://tacs-testing.cf:8443/game/listgames", {
      method: "GET",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      }
    })
      .then(res => res.json())
      .then(games => {
        const newGames = [{ name: "- -" }, ...games];
        this.setState({
          games: newGames,
          selectedGame: newGames[0]
        });
      })
      .catch(error => {
        console.log(error);
      });
    await this.getFactions();
  }

  getFactionMembers() {
    fetch(`https://tacs-testing.cf:8443/game/${this.state.selectedGame.id}`, {
      method: "GET",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      }
    })
      .then(res => res.json())
      .then(gameInfo => {
        let newFactions = [{ factionName: "- -" }, ...gameInfo.factions];
        this.setState({
          factions: newFactions,
          selectedFaction: newFactions[0]
        });
      })
      .catch(error => {
        console.log(error);
      });
  }

  // Get all the factions from the server
  getFactions() {
    fetch(`https://tacs-testing.cf:8443/game/${this.state.selectedGame.id}`, {
      method: "GET",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      }
    })
      .then(res => res.json())
      .then(gameInfo => {
        let newFactions = [{ factionName: "- -" }, ...gameInfo.factions];
        this.setState({
          factions: newFactions,
          selectedFaction: newFactions[0]
        });
      })
      .catch(error => {
        console.log(error);
      });
  }
  joinFactionPopup(faction) {
    if (faction) {
      this.setState({ passwordPopupVisible: true });
    }
  }

  handlePasswordChange = factionPassword => {
    this.setState({ factionPassword });
  };

  handlePopupClose = () => {
    console.log("Koitetaa settaa selected faction: " + this.state.factions[0]);
    this.setState({ selectedFaction: this.state.factions[0] });
  };
  // There's lots of bad solutions here beware! (at least it should work)
  joinFaction() {
    fetch("https://tacs-testing.cf:8443/faction/join-faction", {
      method: "PUT",
      headers: {
        Authorization: "Bearer " + this.props.token,
        Accept: "application/json",
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        factionPassword: this.state.factionPassword,
        factionId: this.state.selectedFaction.factionId,
        game: this.state.selectedGame.id
      })
    })
      .then(response => {
        if (response.ok) {
          console.log("Homma OK!");
          this.setState({
            message: `Joined the faction`,
            messagePopupVisible: true
          });
        }
        return response.json();
      })
      .then(response => {
        if (response.message) {
          this.setState({
            message: response.message,
            messagePopupVisible: true,
            selectedFaction: this.state.factions[0]
          });
        }
      })
      .catch(error => {
        this.setState({
          message: "PERKELE : " + error.message,
          messagePopupVisible: true,
          selectedFaction: this.state.factions[0]
        });
        console.log("VIRHE: " + error);
      });
  }
  // Toggles the tracking boolean (some thought mistake somewhere makes this kinda weird ¯\_(ツ)_/¯ )
  handleTrackingChange() {
    this.setState({ tracking: !this.state.tracking });
    if (!this.state.tracking) {
      this.startTracking();
    } else if (this.state.tracking) {
      this.stopTracking();
    }
  }

  // Start the player tracking with the wanted interval (ms)
  startTracking() {
    console.log("Pelaajan token : " + this.props.token);
    this.getCurrentLocation();
    let interval = 10000;
    this.intervalID = setInterval(() => {
      console.log(
        "Nyt träkätää nim birusti peliä: " + this.state.selectedGame.name
      );

      console.log(
        "Pelaajan latitude: " +
          this.state.userLocation.latitude +
          "Pelaajan longitude: " +
          this.state.userLocation.longitude
      );
      fetch(
        `https:/tacs-testing.cf:8443/tracking/location/${
          this.state.selectedGame.id
        }`,
        {
          method: "POST",
          headers: {
            Authorization: "Bearer " + this.props.token,
            Accept: "application/json",
            "Content-Type": "application/json"
          },
          body: JSON.stringify({
            data: {
              type: "Feature",
              geometry: {
                type: "MultiPoint",
                coordinates: [
                  this.state.userLocation.latitude,
                  this.state.userLocation.longitude
                ],
                properties: {
                  time: null
                }
              }
            }
          })
        }
      )
        .then(res => res.json())
        .then(
          result => {
            console.log(result);
          },
          error => {
            console.log(error);
          }
        );
      console.log("Tracking: " + this.state.tracking);
    }, interval);
  }

  // Stop tracking the player
  stopTracking() {
    clearInterval(this.intervalID);
    console.log("Nyt lopetetaa seuranta.");
  }

  // Start & stop tracking depending on the boolean 'tracking' in state
  componentDidUpdate() {
    // if (this.state.tracking) {
    //   this.startTracking();
    // } else if (!this.state.tracking) {
    //   this.stopTracking();
    // }
  }
  // When you select a game with the picker, clears the tracking interval and gets the factions of the game
  selectGame = async (selectedGame, itemIndex) => {
    await this.setState({ selectedGame, tracking: false });
    await this.getFactions();
    await clearInterval(this.intervalID);
  };
  // When you select a faction, it asks you for a password, which is then sent to the server
  selectFaction = async (selectedFaction, itemIndex) => {
    await this.setState({ selectedFaction, tracking: false });
    await this.joinFactionPopup(this.state.selectedFaction.factionId);
    await clearInterval(this.intervalID);
  };
  //Getting the user location and storing it in the state
  getCurrentLocation = () => {
    const options = {
      enableHighAccuracy: true,
      timeout: 30000,
      maximumAge: 0
    };
    navigator.geolocation.watchPosition(
      position => {
        console.log(
          "Positio päivittyi: " +
            position.coords.latitude +
            position.coords.longitude
        );
        this.setState({
          userLocation: {
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
            latitudeDelta: 0.0522,
            longitudeDelta: 0.0421
          }
        });
      },
      err => console.log(err),
      options
    );
  };

  // Stop tracking on Unmount
  componentWillUnmount() {
    clearInterval(this.intervalID);
  }
  render() {
    if (this.state.games.length > 0) {
      const items = (
        <Fragment>
          <Text style={styles.pickerTitle}>Selected Game:</Text>
          <Picker
            style={styles.picker}
            selectedValue={this.state.selectedGame}
            onValueChange={this.selectGame}
          >
            {this.state.games.map((game, i) => (
              <Picker.Item label={game.name} value={game} key={i} />
            ))}
          </Picker>
          {this.state.selectedGame && this.state.factions.length > 0 && (
            <Fragment>
              <Text style={styles.pickerTitle}>Selected Faction:</Text>
              <Picker
                style={styles.picker}
                selectedValue={this.state.selectedFaction}
                onValueChange={this.selectFaction}
              >
                {this.state.factions.map((faction, i) => (
                  <Picker.Item
                    label={faction.factionName}
                    value={faction}
                    key={i}
                  />
                ))}
              </Picker>
            </Fragment>
          )}
          {this.state.passwordPopupVisible && (
            <PasswordPopup
              handlePasswordChange={this.handlePasswordChange.bind(this)}
              joinFaction={this.joinFaction.bind(this)}
              setPopupVisible={this.setPopupVisible.bind(this)}
              factionPassword={this.state.factionPassword}
              passwordPopupVisible={this.state.passwordPopupVisible}
              handlePopupClose={this.handlePopupClose.bind(this)}
            />
          )}
          {this.state.messagePopupVisible && (
            <MessagePopup
              setPopupVisible={this.setPopupVisible.bind(this)}
              message={this.state.message}
              messagePopupVisible={this.state.messagePopupVisible}
            />
          )}
          <LocationTracker
            tracking={this.state.tracking}
            handleTrackingChange={this.handleTrackingChange.bind(this)}
          />
        </Fragment>
      );
      return <Fragment>{items}</Fragment>;
    } else return <Text>No games found.</Text>;
  }
}

const styles = StyleSheet.create({
  picker: {
    color: "#ffffff",
    paddingBottom: 30
  },
  pickerTitle: {
    color: "#ffffff",
    paddingTop: 10,
    fontSize: 20
  }
});

export default GameList;