/**
 * Niagara Fitness App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from "react";
import {
  KeyboardAvoidingView,
  TouchableOpacity,
  ImageBackground,
  AsyncStorage,
  BackAndroid,
  StyleSheet,
  Platform,
  StatusBar,
  TextInput,
  Image,
  Text,
  View
} from "react-native";

import { StackNavigator, NavigationActions } from "react-navigation";
import PushNotificationAndroid from "react-native-push-notification";
import Swiper from "react-native-swiper";

import styles from "./assets/global_styles";
import config from "./config";
// import translations from "./lang";

import LoadingScreen from "./views/loading";

import BackgroundJob from "react-native-background-job";
var PushNotification = require("react-native-push-notification");

PushNotification.configure({
  // (optional) Called when Token is generated (iOS and Android)
  onRegister: function(token) {
    console.log("TOKEN:", token);
  },

  // (required) Called when a remote or local notification is opened or received
  onNotification: function(notification) {
    const { navigate } = this.props.navigation;
    navigate("Home", { isLoggedIn: false });
    // process the notification

    // required on iOS only (see fetchCompletionHandler docs: https://facebook.github.io/react-native/docs/pushnotificationios.html)
    notification.finish(PushNotificationIOS.FetchResult.NoData);
  },

  // ANDROID ONLY: GCM Sender ID (optional - not required for local notifications, but is need to receive remote push notifications)
  senderID: "YOUR GCM SENDER ID",

  // IOS ONLY (optional): default: all - Permissions to register.
  permissions: {
    alert: true,
    badge: true,
    sound: true
  },

  // Should the initial notification be popped automatically
  // default: true
  popInitialNotification: true,

  /**
   * (optional) default: true
   * - Specified if permissions (ios) and token (android and ios) will requested or not,
   * - if not, you must call PushNotificationsHandler.requestPermissions() later
   */
  requestPermissions: true
});

async function GetLatestNews() {
  console.log("Running in background");
  var PushNotification = require("react-native-push-notification");
  fetch(
    "http://app.niagara.md/api/?ApiToken=eb5a65e694c10a534e53167967daf6f8&action=get_notification"
  )
    .then(response => response.json())
    .then(responseJson => {
      if (72 != responseJson.item.notificationID) {
        PushNotification.localNotification({
          /* Android Only Properties */
          foreground: true,
          id: "0", // (optional) Valid unique 32 bit integer specified as string. default: Autogenerated Unique ID
          ticker: GetNotificationID(), // (optional)
          autoCancel: true, // (optional) default: true
          largeIcon: "ic_launcher", // (optional) default: "ic_launcher"
          smallIcon: "ic_notification", // (optional) default: "ic_notification" with fallback for "ic_launcher"
          bigText: JSON.stringify(responseJson.item.post_content), // (optional) default: "message" prop
          subText: "This is a subText", // (optional) default: none
          color: "red", // (optional) default: system default
          vibrate: true, // (optional) default: true
          vibration: 300, // vibration length in milliseconds, ignored if vibrate=false, default: 1000
          tag: "some_tag", // (optional) add tag to message
          group: "group", // (optional) add group to message
          ongoing: true, // (optional) set whether this is an "ongoing" notification

          /* iOS and Android properties */
          title: JSON.stringify(responseJson.item.post_title), // (optional, for iOS this is only used in apple watch, the title will be the app name on other iOS devices)
          message: JSON.stringify(responseJson.item.post_content), // (required)
          playSound: false, // (optional) default: true
          soundName: "default", // (optional) Sound to play when the notification is shown. Value of 'default' plays the default sound. It can be set to a custom sound such as 'android.resource://com.xyz/raw/my_sound'. It will look for the 'my_sound' audio file in 'res/raw' directory and play it. default: 'default' (default sound is played)
          number: "10", // (optional) Valid 32 bit integer specified as string. default: none (Cannot be zero)
          repeatType: "day", // (Android only) Repeating interval. Could be one of `week`, `day`, `hour`, `minute, `time`. If specified as time, it should be accompanied by one more parameter 'repeatTime` which should the number of milliseconds between each interval
          actions: false,
          date: new Date(Date.now() + 60 * 0) // in 60 secs
        });
        let notificationID = responseJson.item.notificationID;
        SetNotificationID(notificationID);
      }
    })
    .catch(error => {});
}

const backgroundJob = {
  jobKey: "myJob",
  job: () => GetLatestNews()
};

BackgroundJob.register(backgroundJob);

var backgroundSchedule = {
  jobKey: "myJob",
  period: 15000,
  exact: true,
  allowExecutionInForeground: true
};

BackgroundJob.schedule(backgroundSchedule);

console.disableYellowBox = true;

const resetAction = NavigationActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: "Home" })]
});

class LoginScreen extends React.Component {
  static navigationOptions = {
    title: "LoginPage"
  };

  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      name: "",
      password: "",
      errorMsg: "",
      isLoggedIn: false
    };
  }

  FetchLogin = async () => {
    const { navigate } = this.props.navigation;

    return fetch(
      config.hostProtocol +
        config.hostName +
        config.APIBreakPoint +
        config.ApiTokenParam +
        config.APIToken +
        config.actionLogin +
        config.usernameParam +
        this.state.name +
        config.passwordParam +
        this.state.password
    )
      .then(response => response.json())
      .then(responseJson => {
        this.setState(
          {
            isLoading: false,
            errorMsg: responseJson.message,
            userID: responseJson.userID,
            userRole: JSON.stringify(responseJson.userRole)
          },
          async function() {
            console.log(responseJson);
            if (responseJson.loggedin) {
              try {
                await AsyncStorage.setItem(
                  "@USER:isLoggedIn",
                  JSON.stringify(true)
                );
                await AsyncStorage.setItem(
                  "@USER:userID",
                  JSON.stringify(responseJson.userID)
                );
                await AsyncStorage.setItem(
                  "@USER:userRole",
                  JSON.stringify(responseJson.userRole)
                );
              } catch (error) {
                // Error saving data
              }
              const { navigate } = this.props.navigation;
              this.props.navigation.dispatch(resetAction);
            } else {
              try {
                await AsyncStorage.setItem(
                  "@USER:isLoggedIn",
                  JSON.stringify(false)
                );
                await AsyncStorage.setItem("@USER:userID", responseJson.userID);
              } catch (error) {
                // Error saving data
              }
            }
          }
        );
      })
      .catch(error => {
        this.setState(
          {
            isLoading: false
          },
          function() {
            // do something with new state
          }
        );
      });
  };

  async componentWillMount() {
    try {
      let isLoggedIn = await AsyncStorage.getItem("@USER:isLoggedIn");
      if (isLoggedIn !== null) {
        this.setState({
          isLoggedIn: isLoggedIn,
          isLoading: false
        });
      } else {
        this.setState({
          isLoggedIn: false,
          isLoading: false
        });
      }
    } catch (error) {
      // Error retrieving data
    }
    if (this.state.isLoggedIn) {
      const { navigate } = this.props.navigation;
      this.props.navigation.dispatch(resetAction);
    }
  }

  render() {
    const { navigate } = this.props.navigation;

    if (this.state.isLoggedIn && this.state.isLoading) {
      return <LoadingScreen />;
    }

    return (
      <View style={styles.fullScreenContainer}>
        <StatusBar
          backgroundColor="transparent"
          barStyle="light-content"
          translucent
        />

        <KeyboardAvoidingView />
        <ImageBackground
          source={require("./images/background.jpg")}
          style={styles.fullScreenImage}
        >
          <Image
            source={require("./images/logologin.png")}
            style={styles.loginLogo}
          />
          <Text style={styles.smallText}>{this.state.errorMsg}</Text>
          <TextInput
            placeholder="Phone Number *"
            style={styles.inputsText}
            onChangeText={text => this.setState({ name: text })}
            value={this.state.name}
            multiline={true}
            placeholderTextColor="white"
            underlineColorAndroid="transparent"
            returnKeyType="next"
          />
          <TextInput
            placeholder="Password"
            style={styles.inputsText}
            onChangeText={text => this.setState({ password: text })}
            value={this.state.password}
            multiline={true}
            placeholderTextColor="white"
            underlineColorAndroid="transparent"
            returnKeyType="go"
            secureTextEntry={true}
          />
          <View style={styles.halfScreenContainer}>
            <TouchableOpacity
              onPress={this.FetchLogin}
              style={styles.halfWidthButton}
            >
              <Text style={[styles.fullWidthButtonLabel]}>Sign in</Text>
            </TouchableOpacity>

            <TouchableOpacity
              onPress={() => {
                const { navigate } = this.props.navigation;
                navigate("Home", { isLoggedIn: false });
              }}
              style={styles.halfWidthButtonBlue}
            >
              <Text style={styles.fullWidthButtonLabel}>Login as quest</Text>
            </TouchableOpacity>
          </View>
        </ImageBackground>
      </View>
    );
  }
}

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: "Welcome"
  };

  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      JSON_Array: [],
      user_sex: "",
      user_image:
        "https://www.shareicon.net/download/2016/05/29/772558_user_512x512.png",
      user_username: ""
    };
  }

  async componentWillMount() {
    const { params } = this.props.navigation.state;
    try {
      let userID = await AsyncStorage.getItem("@USER:userID");
      let userRole = await AsyncStorage.getItem("@USER:userRole");
      let user = await AsyncStorage.getItem("@USER:isLoggedIn");
      this.setState({
        userID: userID,
        userRole: userRole,
        JSON_Array: user
      });
    } catch (error) {
      this.setState({
        userID: userID,
        userRole: "guest",
        JSON_Array: user
      });
    }
    fetch(
      config.hostProtocol +
        config.hostName +
        config.APIBreakPoint +
        config.ApiTokenParam +
        config.APIToken +
        config.actionGetUser +
        config.userParam +
        this.state.userID
    )
      .then(response => response.json())
      .then(responseJson => {
        this.setState(
          {
            isLoading: false,
            user_username: responseJson.user.username,
            signed_trainer: responseJson.user.signed_trainer.ID,
            signed_manager: responseJson.user.signed_manager.ID,
            user_username: responseJson.user.username,
            user_firstName: responseJson.user.firstName,
            user_lastName: responseJson.user.lastName,
            offers_num: responseJson.offers_num
          },
          function() {
            // do something with new state
          }
        );
      })
      .catch(error => {
        // console.error(error);
        alert(responseJson);
      });
  }

  render() {
    if (this.state.isLoggedIn && this.state.isLoading) {
      return <LoadingScreen />;
    }
    if (this.state.userRole == '"subscriber"') {
      return (
        <View style={styles.fullScreenContainer}>
          <ImageBackground
            source={require("./images/menu.png")}
            style={(styles.fullScreenImage, styles.fullScreenImageLeft)}
          >
            <StatusBar
              backgroundColor="transparent"
              barStyle="light-content"
              translucent
            />
            <Image
              source={require("./images/logonavigation.png")}
              style={styles.navigationLogo}
            />

            <TouchableOpacity style={(styles.container, styles.container_left)}>
              <Text style={styles.menuItemContent}>New Offers</Text>
            </TouchableOpacity>

            <TouchableOpacity style={(styles.container, styles.container_left)}>
              <Text style={styles.menuItemContent}>Schedule</Text>
            </TouchableOpacity>

            <TouchableOpacity style={(styles.container, styles.container_left)}>
              <Text style={styles.menuItemContent}>Trainings</Text>
            </TouchableOpacity>

            <TouchableOpacity style={(styles.container, styles.container_left)}>
              <Text style={styles.menuItemContent}>Messages</Text>
            </TouchableOpacity>

            <TouchableOpacity style={(styles.container, styles.container_left)}>
              <Text style={styles.menuItemContent}>Spa&Beauty</Text>
            </TouchableOpacity>

            <TouchableOpacity
              onPress={async function() {
                try {
                  await AsyncStorage.removeItem("@USER:isLoggedIn");
                  await AsyncStorage.removeItem("@USER:userID");
                  await AsyncStorage.removeItem("@USER:userRole");
                  BackAndroid.exitApp();
                } catch (error) {
                  // Error saving data
                }
              }}
              style={(styles.container, styles.container_left)}
            >
              <Text style={styles.menuItemContent}>Log Out</Text>
            </TouchableOpacity>
          </ImageBackground>
        </View>
      );
    }

    if (this.state.userRole == null) {
      return (
        <View style={styles.fullScreenContainer}>
          <ImageBackground
            source={require("./images/menu.png")}
            style={(styles.fullScreenImage, styles.fullScreenImageLeft)}
          >
            <StatusBar
              backgroundColor="transparent"
              barStyle="light-content"
              translucent
            />
            <Image
              source={require("./images/logonavigation.png")}
              style={styles.navigationLogo}
            />

            <TouchableOpacity style={(styles.container, styles.container_left)}>
              <Text style={styles.menuItemContent}>New Offers</Text>
            </TouchableOpacity>

            <TouchableOpacity style={(styles.container, styles.container_left)}>
              <Text style={styles.menuItemContent}>Schedule</Text>
            </TouchableOpacity>

            <TouchableOpacity style={(styles.container, styles.container_left)}>
              <Text style={styles.menuItemContent}>Trainings</Text>
            </TouchableOpacity>

            <TouchableOpacity style={(styles.container, styles.container_left)}>
              <Text style={styles.menuItemContent}>Spa&Beauty</Text>
            </TouchableOpacity>
          </ImageBackground>
        </View>
      );
    }

    return (
      <View style={styles.fullScreenContainer}>
        <ImageBackground
          source={require("./images/menu.png")}
          style={(styles.fullScreenImage, styles.fullScreenImageLeft)}
        >
          <StatusBar
            backgroundColor="transparent"
            barStyle="light-content"
            translucent
          />
          <Image
            source={require("./images/logonavigation.png")}
            style={styles.navigationLogo}
          />
          <Text style={styles.smallText}>{"quests"}</Text>
          <TouchableOpacity
            onPress={async function() {
              try {
                await AsyncStorage.removeItem("@USER:isLoggedIn");
                BackAndroid.exitApp();
              } catch (error) {
                // Error saving data
              }
            }}
            style={(styles.container, styles.container_left)}
          >
            <Text style={styles.menuItemContent}>Log Out</Text>
          </TouchableOpacity>
          <Text style={styles.menuItemContent}>Guest</Text>
          <TouchableOpacity
            onPress={() => {
              const { navigate } = this.props.navigation;
              navigate("Profile", { UserID: this.state.userID });
            }}
          >
            <View style={styles.userInfoBox}>
              <View>
                <Image
                  source={{ uri: this.state.user_image }}
                  style={{ width: 50, height: 50, borderRadius: 100 }}
                />
                <Text style={styles.menuItemContent}>
                  {this.state.user_firstName} {this.state.user_lastName}
                </Text>
              </View>
            </View>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.button}
            onPress={() => {
              BackgroundJob.schedule({
                jobKey: "myJob",
                period: 1500
              });
            }}
          >
            <Text>Schedule regular job</Text>
          </TouchableOpacity>
        </ImageBackground>
      </View>
    );
  }
}

class ProfileScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  async componentWillMount() {
    try {
      let userID = await AsyncStorage.getItem("@Client:userID");
      let user = await AsyncStorage.getItem("@Client:isLoggedIn");
      this.setState({
        userID: userID,
        JSON_Array: user
      });
    } catch (error) {
      // Error saving data
    }
    fetch(
      config.hostProtocol +
        config.hostName +
        config.APIBreakPoint +
        config.ApiTokenParam +
        config.APIToken +
        config.actionGetUser +
        config.userParam +
        this.state.userID
    )
      .then(response => response.json())
      .then(responseJson => {
        this.setState(
          {
            isLoading: false,
            JSON_Array: responseJson,
            user: responseJson.user,
            user_sex: responseJson.user.sex,
            user_image: responseJson.user.image,
            user_username: responseJson.user.username,
            user_email: responseJson.user.email,
            user_phone: responseJson.user.mobile_phone,
            user_birthday: responseJson.user.birthday_date
          },
          function() {
            // var PushNotification = require('react-native-push-notification');
            // PushNotification.localNotification({
            //   message: "My Notification Message", // (required)
            // });
          }
        );
      })
      .catch(error => {
        console.error(error);
      });
  }

  render() {
    return (
      <ScrollView style={styles.ProfileWrapper}>
        <ImageBackground
          source={require("./images/header_profile.png")}
          style={styles.backgroundImage}
        >
          <View style={styles.ProfileHeader}>
            <Image
              source={{ uri: this.state.user_image }}
              style={styles.ProfileAvatar}
            />
          </View>
        </ImageBackground>
        <View style={styles.ProfileBody}>
          <View style={styles.ProfileInfo}>
            <Text style={styles.ProfileInfoLabel}>Username</Text>
            <Text style={styles.ProfileInfoValue}>
              {this.state.user_username}
            </Text>
          </View>
          <View style={styles.ProfileInfo}>
            <Text style={styles.ProfileInfoLabel}>Email</Text>
            <Text style={styles.ProfileInfoValue}>{this.state.user_email}</Text>
          </View>
          <View style={styles.ProfileInfo}>
            <Text style={styles.ProfileInfoLabel}>Phone Number</Text>
            <Text style={styles.ProfileInfoValue}>{this.state.user_phone}</Text>
          </View>
          <View style={styles.ProfileInfo}>
            <Text style={styles.ProfileInfoLabel}>Sex</Text>
            <Text style={styles.ProfileInfoValue}>{this.state.user_sex}</Text>
          </View>
          <View style={styles.ProfileInfo}>
            <Text style={styles.ProfileInfoLabel}>Your Birthday</Text>
            <Text style={styles.ProfileInfoValue}>
              {this.state.user_birthday}
            </Text>
          </View>
        </View>
      </ScrollView>
    );
  }
}

const NiagaraApp = StackNavigator({
  Login: {
    screen: LoginScreen,
    headerMode: "none",
    headerLeft: null,
    header: null,
    navigationOptions: {
      header: null,
      headerLeft: null
    }
  },
  Home: {
    screen: HomeScreen,
    headerMode: "none",
    headerLeft: null,
    header: null,
    navigationOptions: {
      header: null,
      headerLeft: null
    }
  },
  Profile: {
    screen: ProfileScreen,
    headerLeft: null,
    headerMode: "none",
    header: null,
    navigationOptions: {
      header: null,
      headerLeft: null
    }
  }
});

export default NiagaraApp;