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

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

import { StackNavigator, NavigationActions } from "react-navigation";
import PushNotificationAndroid from "react-native-push-notification";
import { send, subscribe } from "react-native-training-chat-server";

import BackgroundJob from "react-native-background-job";
import Communications from "react-native-communications";
import Swiper from "react-native-swiper";

import single_offer from "./assets/singleOffer_styles";
import virtual_styles from "./assets/virtual_styles";
import offers from "./assets/offersArchive_styles";
import trainers from "./assets/trainers_styles";
import schedule from "./assets/schedule_styles";
import profile from "./assets/profile_styles";
import clients from "./assets/clients_styles";
import manager from "./assets/manager_styles";
import styles from "./assets/global_styles";
import zones from "./assets/zones_styles";
import chat from "./assets/chat_styles";

import config from "./config";
// import translations from "./lang";

import LoadingScreen from "./views/loading";
import Day from "./views/day";
import Content from "./views/offer_content";

/*
* Push Notification ( Start )
*/
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(lastOfferID) {
  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 (lastOfferID !== 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);
      }

      return notificationID;
    })
    .catch(error => {});
}

const backgroundJob = {
  jobKey: "myJob",
  job: async () => {
    try {
      let lastOfferID = await AsyncStorage.getItem("@Common:lastOfferID");
      if (lastOfferID == null) {
        lastOfferID = "1";
      } else {
      }
    } catch (error) {
      // console.log(error);
    }
    if (lastOfferID !== null) {
      alert("1");
      let res = GetLatestNews(lastOfferID);
    } else {
      alert("2");
      let res = GetLatestNews(1);
    }

    try {
      await AsyncStorage.setItem(
        "@Common:lastOfferID",
        JSON.stringify(lastOfferID)
      );
    } catch (error) {
      console.log(error);
    }
  }
};

BackgroundJob.register(backgroundJob);

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

BackgroundJob.schedule(backgroundSchedule);

/*
* Push Notification ( End )
*/
/*
* Common functions ( Start )
* That are running over all screens
*
* Disable warnings in the test mode
*/
console.disableYellowBox = true;

/*
* Reset navigation after login
* to disable login screen for logged in users
*/
const resetAction = NavigationActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: "Home" })]
});

// Common functions ( End )

class WebScreen extends Component {
  static navigationOptions = {
    title: "WebScreen"
  };

  constructor(props) {
    super(props);
    this.state = {
      isLoading: true
    };
  }

  async componentWillMount() {
    const { params } = this.props.navigation.state;

    this.setState({
      isLoading: false,
      targetLink: params.targetLink
    });
  }

  render() {
    let targetLink = this.state.targetLink;

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

    return <WebView source={{ uri: targetLink }} />;
  }
}

class VirtualScreen extends React.Component {
  static navigationOptions = {
    title: "VirtualPage"
  };

  constructor(props) {
    super(props);
    this.state = {
      isLoading: true
    };
  }

  componentDidMount() {
    this.setState({
      isLoading: false
    });
  }

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

    return (
      <ScrollView style={single_offer.fullScreenContainer}>
        <StatusBar
          backgroundColor="transparent"
          barStyle="light-content"
          translucent
        />
        <View style={single_offer.offerWrapper}>
          <ImageBackground
            source={require("./images/virtual.png")}
            style={virtual_styles.HeadingImage}
          >
            <Text style={single_offer.swiperTriangle} />
          </ImageBackground>
        </View>

        <View style={manager.contactsWrapper}>
          <Text style={virtual_styles.HeadingTitle}>Niagara fitness club</Text>

          <TouchableOpacity
            style={manager.contactItem}
            onPress={() => Communications.phonecall("022 01 10 21", true)}
          >
            <Image
              source={require("./images/mobile_phone.png")}
              style={manager.contactIcon}
            />
            <Text style={manager.contactText}>022 01 10 21</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={manager.contactItem}
            onPress={() =>
              Communications.email(
                ["marketing@niagara.md"],
                null,
                null,
                null,
                null
              )
            }
          >
            <Image
              source={require("./images/mail.png")}
              style={manager.contactIcon}
            />
            <Text style={manager.contactText}>marketing@niagara.md</Text>
          </TouchableOpacity>

          <TouchableOpacity style={manager.contactItem}>
            <Image
              source={require("./images/pointer.png")}
              style={manager.contactIcon}
            />
            <Text style={manager.contactText}>str. Ghidighici 5</Text>
          </TouchableOpacity>

          <View style={virtual_styles.hoursWrapper}>
            <View style={virtual_styles.hoursSingle}>
              <Text style={virtual_styles.hoursSingleLabel}>Luni-Simbata:</Text>
              <Text style={virtual_styles.hoursSingleValue}>07:00 - 23:00</Text>
            </View>
            <View style={virtual_styles.hoursSingle}>
              <Text style={virtual_styles.hoursSingleLabel}>Duminica:</Text>
              <Text style={virtual_styles.hoursSingleValue}>09:00 - 22:00</Text>
            </View>

            <TouchableOpacity
              onPress={() => Communications.phonecall("022 01 10 21", true)}
              style={styles.halfWidthButton}
            >
              <Text style={[styles.fullWidthButtonLabel]}>Call Now</Text>
            </TouchableOpacity>
          </View>
        </View>
      </ScrollView>
    );
  }
}

class FaqScreen extends React.Component {
  static navigationOptions = {
    title: "FaqPage"
  };

  constructor(props) {
    super(props);
    this.state = {
      isLoading: true
    };
  }

  componentDidMount() {
    this.setState({
      isLoading: false
    });
  }

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

    return (
      <ScrollView style={single_offer.fullScreenContainer}>
        <StatusBar
          backgroundColor="transparent"
          barStyle="light-content"
          translucent
        />
        <View style={single_offer.offerWrapper}>
          <ImageBackground
            source={require("./images/faq_bg.jpg")}
            style={virtual_styles.HeadingImage}
          >
            <Text style={single_offer.swiperTriangle} />
          </ImageBackground>
        </View>

        <View style={manager.contactsWrapper}>
          <Text style={virtual_styles.HeadingTitle}>Niagara fitness club</Text>

          <TouchableOpacity
            style={manager.contactItem}
            onPress={() => Communications.phonecall("022 01 10 21", true)}
          >
            <Image
              source={require("./images/mobile_phone.png")}
              style={manager.contactIcon}
            />
            <Text style={manager.contactText}>022 01 10 21</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={manager.contactItem}
            onPress={() =>
              Communications.email(
                ["marketing@niagara.md"],
                null,
                null,
                null,
                null
              )
            }
          >
            <Image
              source={require("./images/mail.png")}
              style={manager.contactIcon}
            />
            <Text style={manager.contactText}>marketing@niagara.md</Text>
          </TouchableOpacity>

          <TouchableOpacity style={manager.contactItem}>
            <Image
              source={require("./images/pointer.png")}
              style={manager.contactIcon}
            />
            <Text style={manager.contactText}>str. Ghidighici 5</Text>
          </TouchableOpacity>

          <View style={virtual_styles.hoursWrapper}>
            <View style={virtual_styles.hoursSingle}>
              <Text style={virtual_styles.hoursSingleLabel}>Luni-Simbata:</Text>
              <Text style={virtual_styles.hoursSingleValue}>07:00 - 23:00</Text>
            </View>
            <View style={virtual_styles.hoursSingle}>
              <Text style={virtual_styles.hoursSingleLabel}>Duminica:</Text>
              <Text style={virtual_styles.hoursSingleValue}>09:00 - 22:00</Text>
            </View>

            <TouchableOpacity
              onPress={() => Communications.phonecall("022 01 10 21", true)}
              style={styles.halfWidthButton}
            >
              <Text style={[styles.fullWidthButtonLabel]}>Call Now</Text>
            </TouchableOpacity>
          </View>
        </View>
      </ScrollView>
    );
  }
}

class ChatScreen extends React.Component {
  static navigationOptions = {
    title: "ChatPage"
  };

  state = {
    isLoading: true,
    typing: "",
    messages: []
  };

  async componentWillMount() {
    const { params } = this.props.navigation.state;

    chatName = await AsyncStorage.getItem("@User:firstName");
    let userID = await AsyncStorage.getItem("@User:userID");
    let userToken = await AsyncStorage.getItem("@User:userToken");
    let signedManager = await AsyncStorage.getItem("@User:signedManager");

    this.setState({
      userManager: JSON.parse(signedManager),
      isLoading: false,
      localID: userID
    });

    channel = JSON.parse(userToken) + "_" + params.chatToken;

    CHANNEL = channel;
    USERID = userID;

    subscribe(CHANNEL, messages => {
      this.setState({ messages });
    });
  }

  sendMessage = async () => {
    // read message from component state
    const message = this.state.typing;

    // send message to our channel, with sender name
    await send({
      channel: CHANNEL,
      sender: chatName,
      id: USERID,
      message
    });

    // set the component state (clears text input)
    this.setState({
      typing: ""
    });
  };

  renderItem({ item }) {
    if (chatName == item.sender) {
      return (
        <View style={chat.row}>
          <View style={chat.rowText}>
            <View style={chat.bubble}>
              <Text style={chat.message}>{item.message}</Text>
            </View>
          </View>
        </View>
      );
    }
    return (
      <View style={chat.rowReverse}>
        <View style={chat.rowText}>
          <View style={chat.bubbleReverse}>
            <Text style={chat.message}>{item.message}</Text>
          </View>
        </View>
      </View>
    );
  }

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

    return (
      <View style={chat.container}>
        <View style={chat.header}>
          <Text style={chat.managerTitle}>
            {this.state.userManager.display_name}
          </Text>
          <Image
            source={{ uri: this.state.userManager.avatar }}
            style={chat.managerAvatar}
          />
        </View>
        <FlatList
          data={this.state.messages}
          renderItem={this.renderItem}
          inverted
        />
        <KeyboardAvoidingView>
          <View style={chat.footer}>
            <TextInput
              value={this.state.typing}
              style={chat.input}
              underlineColorAndroid="transparent"
              placeholder="Type something nice"
              onChangeText={text => this.setState({ typing: text })}
            />
            <TouchableOpacity onPress={this.sendMessage}>
              <Text style={chat.send}>Send</Text>
            </TouchableOpacity>
          </View>
        </KeyboardAvoidingView>
      </View>
    );
  }
}

class ManagerChatScreen extends React.Component {
  static navigationOptions = {
    title: "ChatPage"
  };

  state = {
    isLoading: true,
    typing: "",
    messages: [],
    clientToken: "",
    clientAvatar: "",
    clientDisplayName: ""
  };

  async componentWillMount() {
    const { params } = this.props.navigation.state;

    chatName = await AsyncStorage.getItem("@User:firstName");
    let userID = await AsyncStorage.getItem("@User:userID");
    let userToken = await AsyncStorage.getItem("@User:userToken");

    this.setState({
      isLoading: false,
      localID: userID,
      clientToken: params.clientToken,
      clientAvatar: params.clientAvatar,
      clientDisplayName: params.clientDisplayName
    });

    channel = params.clientToken + "_" + JSON.parse(userToken);

    CHANNEL = channel;
    USERID = userID;

    subscribe(CHANNEL, messages => {
      this.setState({ messages });
    });
  }

  sendMessage = async () => {
    // read message from component state
    const message = this.state.typing;

    // send message to our channel, with sender name
    await send({
      channel: CHANNEL,
      sender: chatName,
      id: USERID,
      message
    });

    // set the component state (clears text input)
    this.setState({
      typing: ""
    });
  };

  renderItem({ item }) {
    if (chatName == item.sender) {
      return (
        <View style={chat.row}>
          <View style={chat.rowText}>
            <View style={chat.bubble}>
              <Text style={chat.message}>{item.message}</Text>
            </View>
          </View>
        </View>
      );
    }
    return (
      <View style={chat.rowReverse}>
        <View style={chat.rowText}>
          <View style={chat.bubbleReverse}>
            <Text style={chat.message}>{item.message}</Text>
          </View>
        </View>
      </View>
    );
  }

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

    return (
      <View style={chat.container}>
        <View style={chat.header}>
          <Text style={chat.managerTitle}>{this.state.clientDisplayName}</Text>
          <Image
            source={{ uri: this.state.clientAvatar }}
            style={chat.managerAvatar}
          />
        </View>
        <FlatList
          data={this.state.messages}
          renderItem={this.renderItem}
          inverted
        />
        <KeyboardAvoidingView>
          <View style={chat.footer}>
            <TextInput
              value={this.state.typing}
              style={chat.input}
              underlineColorAndroid="transparent"
              placeholder="Type something nice"
              onChangeText={text => this.setState({ typing: text })}
            />
            <TouchableOpacity onPress={this.sendMessage}>
              <Text style={chat.send}>Send</Text>
            </TouchableOpacity>
          </View>
        </KeyboardAvoidingView>
      </View>
    );
  }
}

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

  constructor(props) {
    super(props);
    this.state = {
      isLoading: true
    };
  }

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

    return fetch(
      config.hostProtocol +
        config.hostName +
        config.APIBreakPoint +
        config.ApiTokenParam +
        config.APIToken +
        config.actionUserData +
        config.usernameParam +
        this.state.name +
        config.passwordParam +
        this.state.password
    )
      .then(response => response.json())
      .then(responseJson => {
        this.setState(
          {
            isLoading: false,
            errorMsg: responseJson.response.message,
            userID: responseJson.response.userID
          },
          async function() {
            if (responseJson.response.userRole == "manager") {
              try {
                await AsyncStorage.setItem(
                  "@User:isLoggedIn",
                  JSON.stringify(true)
                );
                await AsyncStorage.setItem(
                  "@User:userRole",
                  JSON.stringify(responseJson.response.userRole)
                );
                await AsyncStorage.setItem(
                  "@User:userID",
                  JSON.stringify(responseJson.response.userID)
                );
                await AsyncStorage.setItem(
                  "@User:userAvatar",
                  JSON.stringify(responseJson.user.manager_user_avatar)
                );
                await AsyncStorage.setItem(
                  "@User:signedClients",
                  JSON.stringify(responseJson.user.signed_clients)
                );
                await AsyncStorage.setItem(
                  "@User:mobilePhone",
                  JSON.stringify(responseJson.user.manager_phone_number)
                );
                await AsyncStorage.setItem(
                  "@User:firstName",
                  responseJson.user.firstName
                );
                await AsyncStorage.setItem(
                  "@User:lastName",
                  responseJson.user.lastName
                );
                await AsyncStorage.setItem(
                  "@User:email",
                  JSON.stringify(responseJson.user.manager_email)
                );
                await AsyncStorage.setItem(
                  "@User:userToken",
                  JSON.stringify(responseJson.user.user_token)
                );

                const { navigate } = this.props.navigation;

                this.props.navigation.dispatch(resetAction);
              } catch (error) {
                // Error saving data
              }
            } else {
              try {
                await AsyncStorage.setItem(
                  "@User:isLoggedIn",
                  JSON.stringify(true)
                );
                await AsyncStorage.setItem(
                  "@User:userRole",
                  JSON.stringify(responseJson.response.userRole)
                );
                await AsyncStorage.setItem(
                  "@User:userID",
                  JSON.stringify(responseJson.response.userID)
                );
                await AsyncStorage.setItem(
                  "@User:userSex",
                  JSON.stringify(responseJson.user.sex)
                );
                await AsyncStorage.setItem(
                  "@User:userAvatar",
                  JSON.stringify(responseJson.user.client_user_avatar)
                );
                await AsyncStorage.setItem(
                  "@User:mobilePhone",
                  JSON.stringify(responseJson.user.mobile_phone)
                );
                await AsyncStorage.setItem(
                  "@User:clubCardType",
                  JSON.stringify(responseJson.user.club_card_type)
                );
                await AsyncStorage.setItem(
                  "@User:birthdayDate",
                  JSON.stringify(responseJson.user.birthday_date)
                );
                await AsyncStorage.setItem(
                  "@User:firstName",
                  responseJson.user.firstName
                );
                await AsyncStorage.setItem(
                  "@User:lastName",
                  responseJson.user.lastName
                );
                await AsyncStorage.setItem(
                  "@User:email",
                  JSON.stringify(responseJson.user.email)
                );
                await AsyncStorage.setItem(
                  "@User:userToken",
                  JSON.stringify(responseJson.user.user_token)
                );
                await AsyncStorage.setItem(
                  "@User:signedTrainer",
                  JSON.stringify(responseJson.user.signed_trainer)
                );
                await AsyncStorage.setItem(
                  "@User:signedManager",
                  JSON.stringify(responseJson.user.signed_manager)
                );

                const { navigate } = this.props.navigation;

                this.props.navigation.dispatch(resetAction);
              } catch (error) {
                // Error saving data
              }
            }
          }
        );
      });
  };

  async componentDidMount() {
    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() {
    if (this.state.isLoading) {
      return <LoadingScreen />;
    }

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

        <ImageBackground
          source={require("./images/menu.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={false}
            placeholderTextColor="white"
            underlineColorAndroid="transparent"
            returnKeyType="next"
          />
          <TextInput
            placeholder="Password"
            style={styles.inputsText}
            onChangeText={text => this.setState({ password: text })}
            value={this.state.password}
            multiline={false}
            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={async () => {
                try {
                  await AsyncStorage.removeItem("@User:isLoggedIn");
                  await AsyncStorage.removeItem("@User:userID");
                  await AsyncStorage.removeItem("@User:userRole");
                  // BackAndroid.exitApp();

                  const { navigate } = this.props.navigation;
                  navigate("Middle");
                } catch (error) {
                  // Error saving data
                  const { navigate } = this.props.navigation;
                  navigate("Middle");
                }
              }}
              style={styles.halfWidthButtonBlue}
            >
              <Text style={styles.fullWidthButtonLabel}>Back</Text>
            </TouchableOpacity>
          </View>
        </ImageBackground>
      </View>
    );
  }
}

class MiddleScreen extends React.Component {
  static navigationOptions = {
    title: "MiddlePage"
  };

  constructor(props) {
    super(props);
    this.state = {
      isLoading: true
    };
  }

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

    this.props.navigation.dispatch(resetAction);
  }

  render() {
    return <LoadingScreen />;
  }
}

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

  constructor(props) {
    super(props);
    this.state = {
      isLoading: true
    };
  }

  FetchCommonData = async () => {
    return fetch(
      config.hostProtocol +
        config.hostName +
        config.APIBreakPoint +
        config.ApiTokenParam +
        config.APIToken +
        config.actionCommonData
    )
      .then(response => response.json())
      .then(responseJson => {
        this.setState(
          {
            isLoading: false,
            JSON_Array: responseJson
          },
          async function() {
            try {
              await AsyncStorage.setItem(
                "@CommonData:offersCounter",
                JSON.stringify(responseJson.offers_counter)
              );
              await AsyncStorage.setItem(
                "@CommonData:offersArray",
                JSON.stringify(responseJson.offers)
              );
              await AsyncStorage.setItem(
                "@CommonData:scheduleArray",
                JSON.stringify(responseJson.schedule)
              );
              await AsyncStorage.setItem(
                "@CommonData:clubzonesArray",
                JSON.stringify(responseJson.clubzones)
              );
            } catch (error) {
              // Error saving data
            }
          }
        );
      })
      .catch(error => {
        console.error(error);
      });
  };

  async componentWillMount() {
    let isLoggedIn = await AsyncStorage.getItem("@User:isLoggedIn");
    let firstName = await AsyncStorage.getItem("@User:firstName");
    let lastName = await AsyncStorage.getItem("@User:lastName");
    let userAvatar = await AsyncStorage.getItem("@User:userAvatar");
    let clubCardType = await AsyncStorage.getItem("@User:clubCardType");
    let userRole = await AsyncStorage.getItem("@User:userRole");
    let lastOfferID = await AsyncStorage.getItem("@Common:lastOfferID");

    this.FetchCommonData();

    let offersCounter = await AsyncStorage.getItem("@CommonData:offersCounter");

    if (isLoggedIn) {
      this.setState({
        isLoggedIn: isLoggedIn,
        lastName: lastName,
        firstName: firstName,
        clubCardType: JSON.parse(clubCardType),
        userAvatar: JSON.parse(userAvatar),
        userRole: JSON.parse(userRole),
        isLoading: true
      });
    }
    this.setState({
      isLoggedIn: isLoggedIn,
      offersCounter: offersCounter,
      isLoading: false
    });
  }

  async componentDidMount() {
    this.setState({
      isLoading: false
    });

    let offersCounter = await AsyncStorage.getItem("@CommonData:offersCounter");

    this.setState({
      offersCounter: offersCounter,
      isLoading: false
    });
  }

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

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

            <TouchableOpacity
              onPress={() => {
                const { navigate } = this.props.navigation;
                navigate("OffersArchive", { isLoggedIn: false });
              }}
              style={styles.menuWrapper}
            >
              <Text style={styles.menuItem}>New Offers</Text>
              <Text style={styles.menuOffersCounter}>
                {this.state.offersCounter}
              </Text>
            </TouchableOpacity>

            <TouchableOpacity
              onPress={() => {
                const { navigate } = this.props.navigation;
                navigate("Schedule", { isLoggedIn: false });
              }}
              style={styles.menuWrapper}
            >
              <Text style={styles.menuItem}>Schedule</Text>
            </TouchableOpacity>

            <TouchableOpacity
              onPress={() => {
                const { navigate } = this.props.navigation;
                navigate("TrainingsArchive", { isLoggedIn: false });
              }}
              style={styles.menuWrapper}
            >
              <Text style={styles.menuItem}>Club Zones</Text>
            </TouchableOpacity>

            <TouchableOpacity style={styles.menuWrapper}>
              <Text style={styles.menuItem}>Messages</Text>
            </TouchableOpacity>

            <TouchableOpacity
              onPress={() => {
                const { navigate } = this.props.navigation;
                navigate("Web", {
                  targetLink: "https://n71694.yclients.com/"
                });
              }}
              style={styles.menuWrapper}
            >
              <Text style={styles.menuItem}>Spa&Beauty</Text>
            </TouchableOpacity>

            <View style={styles.actionLinksWrapper}>
              <TouchableOpacity
                onPress={() => {
                  const { navigate } = this.props.navigation;
                  navigate("Manager", { isLoggedIn: false });
                }}
                style={styles.menuWrapperSpecial}
              >
                <Text style={styles.menuItemSpecial}>Manager</Text>
              </TouchableOpacity>

              <TouchableOpacity
                onPress={() => {
                  const { navigate } = this.props.navigation;
                  navigate("Trainers", { isLoggedIn: false });
                }}
                style={styles.menuWrapperSpecial}
              >
                <Text style={styles.menuItemSpecial}>Personal Trainers</Text>
              </TouchableOpacity>
            </View>

            <TouchableOpacity
              onPress={() => {
                const { navigate } = this.props.navigation;
                navigate("Profile", { UserID: this.state.userID });
              }}
            >
              <View style={profile.userInfoBox}>
                <Image
                  source={{ uri: this.state.userAvatar }}
                  style={profile.infoUserAvatar}
                />

                <Text style={profile.userInfoName}>
                  {this.state.firstName} {this.state.lastName}
                </Text>
                <Text style={profile.userInfoCard}>
                  {this.state.clubCardType}
                </Text>
              </View>
            </TouchableOpacity>
          </ImageBackground>
        </View>
      );
    }
    if (this.state.userRole == "manager") {
      return (
        <View style={styles.fullScreenContainer}>
          <ImageBackground
            source={require("./images/menu.jpg")}
            style={(styles.fullScreenImage, styles.fullScreenImageLeft)}
          >
            <StatusBar
              backgroundColor="transparent"
              barStyle="light-content"
              translucent
            />
            <Image
              source={require("./images/logonavigation.png")}
              style={styles.navigationLogo}
            />

            <TouchableOpacity
              onPress={() => {
                const { navigate } = this.props.navigation;
                navigate("OffersArchive", { isLoggedIn: false });
              }}
              style={styles.menuWrapper}
            >
              <Text style={styles.menuItem}>New Offers</Text>
              <Text style={styles.menuOffersCounter}>
                {this.state.offersCounter}
              </Text>
            </TouchableOpacity>

            <TouchableOpacity
              onPress={() => {
                const { navigate } = this.props.navigation;
                navigate("Schedule", { isLoggedIn: false });
              }}
              style={styles.menuWrapper}
            >
              <Text style={styles.menuItem}>Schedule</Text>
            </TouchableOpacity>

            <TouchableOpacity
              onPress={() => {
                const { navigate } = this.props.navigation;
                navigate("TrainingsArchive", { isLoggedIn: false });
              }}
              style={styles.menuWrapper}
            >
              <Text style={styles.menuItem}>Club Zones</Text>
            </TouchableOpacity>

            <TouchableOpacity style={styles.menuWrapper}>
              <Text style={styles.menuItem}>Messages</Text>
            </TouchableOpacity>

            <TouchableOpacity
              onPress={() => {
                const { navigate } = this.props.navigation;
                navigate("Web", {
                  targetLink: "https://n71694.yclients.com/"
                });
              }}
              style={styles.menuWrapper}
            >
              <Text style={styles.menuItem}>Spa&Beauty</Text>
            </TouchableOpacity>

            <View style={styles.actionLinksWrapper}>
              <TouchableOpacity
                onPress={() => {
                  const { navigate } = this.props.navigation;
                  navigate("Clients", { isLoggedIn: false });
                }}
                style={styles.menuWrapperSpecial}
              >
                <Text style={styles.menuItemSpecial}>Clients List</Text>
              </TouchableOpacity>

              <TouchableOpacity
                onPress={async () => {
                  try {
                    await AsyncStorage.removeItem("@User:isLoggedIn");
                    await AsyncStorage.removeItem("@User:userID");
                    await AsyncStorage.removeItem("@User:userRole");
                    // BackAndroid.exitApp();

                    const { navigate } = this.props.navigation;
                    navigate("Middle");
                  } catch (error) {
                    // Error saving data
                    const { navigate } = this.props.navigation;
                    navigate("Middle");
                  }
                }}
                style={styles.menuWrapperSpecial}
              >
                <Text style={styles.menuItemSpecial}>Log Out</Text>
              </TouchableOpacity>
            </View>

            <TouchableOpacity
              onPress={() => {
                const { navigate } = this.props.navigation;
                navigate("Profile", { UserID: this.state.userID });
              }}
            >
              <View style={profile.userInfoBox}>
                <Image
                  source={{ uri: this.state.userAvatar }}
                  style={profile.infoUserAvatar}
                />

                <Text style={profile.userInfoName}>
                  {this.state.firstName} {this.state.lastName}
                </Text>
                <Text style={profile.userInfoCard}>
                  {this.state.clubCardType}
                </Text>
              </View>
            </TouchableOpacity>
          </ImageBackground>
        </View>
      );
    }

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

            <TouchableOpacity
              onPress={() => {
                const { navigate } = this.props.navigation;
                navigate("OffersArchive", { isLoggedIn: false });
              }}
              style={styles.menuWrapper}
            >
              <Text style={styles.menuItem}>New Offers</Text>
              <Text style={styles.menuOffersCounter}>
                {this.state.offersCounter}
              </Text>
            </TouchableOpacity>

            <TouchableOpacity
              onPress={() => {
                const { navigate } = this.props.navigation;
                navigate("Schedule", { isLoggedIn: false });
              }}
              style={styles.menuWrapper}
            >
              <Text style={styles.menuItem}>Schedule</Text>
            </TouchableOpacity>

            <TouchableOpacity
              onPress={() => {
                const { navigate } = this.props.navigation;
                navigate("TrainingsArchive", { isLoggedIn: false });
              }}
              style={styles.menuWrapper}
            >
              <Text style={styles.menuItem}>Club Zones</Text>
            </TouchableOpacity>

            <TouchableOpacity style={styles.menuWrapper}>
              <Text style={styles.menuItem}>Kids Club</Text>
            </TouchableOpacity>

            <TouchableOpacity
              onPress={() => {
                const { navigate } = this.props.navigation;
                navigate("Web", {
                  targetLink: "https://n71694.yclients.com/"
                });
              }}
              style={styles.menuWrapper}
            >
              <Text style={styles.menuItem}>Spa&Beauty</Text>
            </TouchableOpacity>

            <View style={styles.actionLinksWrapper}>
              <TouchableOpacity
                onPress={() => {
                  const { navigate } = this.props.navigation;
                  navigate("Virtual", { isLoggedIn: false });
                }}
                style={styles.menuWrapperSpecial}
              >
                <Text style={styles.menuItemSpecial}>Order a tour</Text>
              </TouchableOpacity>

              <TouchableOpacity
                onPress={() => {
                  const { navigate } = this.props.navigation;
                  navigate("Faq", { isLoggedIn: false });
                }}
                style={styles.menuWrapperSpecial}
              >
                <Text style={styles.menuItemSpecial}>F.A.Q</Text>
              </TouchableOpacity>
            </View>

            <View style={styles.guestWrapper}>
              <TouchableOpacity
                onPress={() => {
                  const { navigate } = this.props.navigation;
                  navigate("Login", { isLoggedIn: false });
                }}
                style={styles.guestLogin}
              >
                <Image
                  source={require("./images/guestlogin.png")}
                  style={styles.guestLoginIcon}
                />
                <Text style={styles.fullWidthButtonLabel}>Login as client</Text>
              </TouchableOpacity>

              <TouchableOpacity
                style={styles.guestPhoneWrapper}
                onPress={() => Communications.phonecall("022 21 00 21", true)}
              >
                <Image
                  source={require("./images/phone.png")}
                  style={styles.guestPhoneIcon}
                />
                <Text style={styles.guestPhoneText}>022 21 00 21</Text>
              </TouchableOpacity>

              <TouchableOpacity style={styles.guestAdressWrapper}>
                <Image
                  source={require("./images/pointer.png")}
                  style={styles.guestAdressIcon}
                />
                <Text style={styles.guestAdressText}>str. Ghidighici, 5</Text>
              </TouchableOpacity>
            </View>
          </ImageBackground>
        </View>
      );
    } else {
      return (
        <View style={styles.guestWrapper}>
          <TouchableOpacity
            onPress={async () => {
              try {
                await AsyncStorage.removeItem("@User:isLoggedIn");
                await AsyncStorage.removeItem("@User:userID");
                await AsyncStorage.removeItem("@User:userRole");
                // BackAndroid.exitApp();

                const { navigate } = this.props.navigation;
                navigate("Middle");
              } catch (error) {
                // Error saving data
                const { navigate } = this.props.navigation;
                navigate("Middle");
              }
            }}
            style={profile.logoutWrapper}
          >
            <Text style={profile.logoutLabel}>Log Out</Text>
          </TouchableOpacity>
        </View>
      );
    }
  }
}

class OffersArchiveScreen extends React.Component {
  static navigationOptions = {
    title: "OffersArchivePage"
  };

  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      offersArray: []
    };
  }

  async componentWillMount() {
    let offersArray = await AsyncStorage.getItem("@CommonData:offersArray");

    this.setState({
      isLoading: false,
      offersArray: JSON.parse(offersArray)
    });
  }

  render() {
    if (this.state.isLoading) {
      return <LoadingScreen />;
    }
    let offersArray = this.state.offersArray;

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

        <ImageBackground
          source={require("./images/menu.jpg")}
          style={offers.fullScreenImage}
        >
          <View style={offers.offersContainer}>
            <Swiper
              style={offers.swiper}
              showsButtons={false}
              dot={<View style={offers.swiperDot} />}
              activeDot={<View style={offers.activeDot} />}
              paginationStyle={offers.swiperPagination}
            >
              {offersArray.map((prop, key) => {
                return (
                  <View style={offers.swiperWrapper} key={key}>
                    <View style={offers.swiperInnerContainer}>
                      <View style={offers.swiperInnerHeader}>
                        <TouchableOpacity
                          onPress={() => {
                            const { navigate } = this.props.navigation;
                            navigate("Offers", { offerID: prop.index });
                          }}
                        >
                          <Image
                            source={{ uri: prop.image_url }}
                            style={offers.swiperImage}
                          />
                        </TouchableOpacity>

                        <Text style={offers.swiperTriangle} />
                      </View>

                      <TouchableOpacity
                        onPress={() => {
                          const { navigate } = this.props.navigation;
                          navigate("Offers", { offerID: prop.index });
                        }}
                      >
                        <Text key={key} style={offers.swiperTitle}>
                          {prop.post_title}
                        </Text>
                      </TouchableOpacity>

                      <View style={offers.swiperInnerBody}>
                        <Text style={offers.swiperTitleDivider} />

                        <Text style={offers.swiperContent}>
                          {prop.post_excerpt}
                        </Text>
                      </View>
                    </View>
                  </View>
                );
              })}
            </Swiper>
          </View>
        </ImageBackground>
      </View>
    );
  }
}

class OffersScreen extends React.Component {
  static navigationOptions = {
    title: "OffersPage"
  };

  constructor(props) {
    super(props);
    this.state = {
      isLoading: true
    };
  }

  async componentWillMount() {
    const { params } = this.props.navigation.state;

    let offersArray = await AsyncStorage.getItem("@CommonData:offersArray");

    this.setState({
      isLoading: false,
      offersArray: JSON.parse(offersArray),
      offerID: params.offerID
    });

    // alert(offersArray);
  }

  async componentDidMount() {
    return this.setState((isLoading: false));
  }

  render() {
    let offersArray = this.state.offersArray;

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

    return (
      <ScrollView style={single_offer.fullScreenContainer}>
        <StatusBar
          backgroundColor="transparent"
          barStyle="light-content"
          translucent
        />
        {offersArray.map((prop, key) => {
          if (prop.index == this.state.offerID) {
            return (
              <View style={single_offer.offerWrapper} key={key}>
                <ImageBackground
                  source={{ uri: prop.image_url }}
                  style={single_offer.offerImage}
                >
                  <Text style={single_offer.offerTitle}>{prop.post_title}</Text>

                  <Text style={single_offer.offerTitleDivider} />

                  <Text style={single_offer.offerSubTitle}>
                    Niagara Fitness Club
                  </Text>

                  <Text style={single_offer.swiperTriangle} />
                </ImageBackground>

                <View style={single_offer.offerBody} key={key}>
                  <Content post_content={prop.post_content} />
                </View>

                <View style={single_offer.halfScreenContainer}>
                  <TouchableOpacity
                    onPress={() => {
                      const { navigate } = this.props.navigation;
                      navigate("Web", {
                        targetLink: prop.single_offer_action_link
                      });
                    }}
                    style={single_offer.halfWidthButtonBlue}
                  >
                    <Text style={[single_offer.fullWidthButtonLabel]}>
                      Register online
                    </Text>
                  </TouchableOpacity>

                  <TouchableOpacity
                    onPress={() => {
                      const { navigate } = this.props.navigation;
                      navigate("Manager", {
                        targetLink: prop.single_offer_action_link
                      });
                    }}
                    style={single_offer.halfWidthButton}
                  >
                    <Text style={single_offer.fullWidthButtonLabel}>
                      Call Manager
                    </Text>
                  </TouchableOpacity>
                </View>
              </View>
            );
          } else {
            return;
          }
        })}
      </ScrollView>
    );
  }
}

class TrainingsArchiveScreen extends React.Component {
  static navigationOptions = {
    title: "TrainingsArchivePage"
  };

  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      offersArray: []
    };
  }

  async componentWillMount() {
    let clubzonesArray = await AsyncStorage.getItem(
      "@CommonData:clubzonesArray"
    );

    this.setState({
      isLoading: false,
      clubzonesArray: JSON.parse(clubzonesArray)
    });
  }

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

    let clubzonesArray = this.state.clubzonesArray;

    return (
      <ScrollView style={zones.a}>
        <StatusBar
          backgroundColor="transparent"
          barStyle="light-content"
          translucent
        />
        <View style={clients.header}>
          <Text style={clients.clientsTitle}>Club Zones</Text>
        </View>
        <View style={zones.wrapper}>
          {clubzonesArray.map((prop, key) => {
            return (
              <View style={zones.column} key={key}>
                <View style={zones.item}>
                  <TouchableOpacity
                    onPress={() => {
                      const { navigate } = this.props.navigation;
                      navigate("Offers", { offerID: prop.index });
                    }}
                  >
                    <ImageBackground
                      source={{ uri: prop.image_url }}
                      style={zones.image}
                    />
                  </TouchableOpacity>
                  <View style={zones.itemContent}>
                    <Text style={zones.title}>{prop.post_title}</Text>
                    <View style={zones.dotsWrapper}>
                      <Text style={zones.dots} />
                      <Text style={zones.dots} />
                      <Text style={zones.dots} />
                    </View>
                  </View>
                </View>
              </View>
            );
          })}
        </View>
      </ScrollView>
    );
  }
}

class TrainingsScreen extends React.Component {
  static navigationOptions = {
    title: "TrainingsPage"
  };

  constructor(props) {
    super(props);
    this.state = {
      isLoading: true
    };
  }

  async componentWillMount() {
    this.setState({
      isLoading: false
    });
  }

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

    return (
      <View>
        <StatusBar
          backgroundColor="transparent"
          barStyle="light-content"
          translucent
        />

        <Text>Trainings Screen</Text>
      </View>
    );
  }
}

class ScheduleScreen extends React.Component {
  static navigationOptions = {
    title: "SchedulePage"
  };

  constructor(props) {
    super(props);
    this.state = {
      isLoading: true
    };
  }

  async componentWillMount() {
    let scheduleArray = await AsyncStorage.getItem("@CommonData:scheduleArray");

    this.setState({
      isLoading: false,
      index: 4,
      scheduleArray: JSON.parse(scheduleArray)
    });
  }

  render() {
    if (this.state.isLoading) {
      return <LoadingScreen />;
    }
    let scheduleArray = this.state.scheduleArray;
    let scheduleArrayDay = scheduleArray[this.state.index].items;

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

        <ImageBackground
          source={require("./images/header_profile.jpg")}
          style={schedule.monthView}
        >
          <View style={schedule.headerWrapper}>
            <Text style={schedule.headerTitle}>April</Text>
            <Text style={schedule.headerDivider} />
          </View>
          <View style={schedule.weekView}>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 0
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayInactive} index="1" number="26" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 1
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayInactive} index="2" number="27" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 2
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayInactive} index="3" number="28" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 3
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayInactive} index="4" number="29" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 4
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayCurrent} index="5" number="30" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 5
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayInactive} index="6" number="31" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 6
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayActive} index="7" number="01" />
            </TouchableOpacity>
          </View>

          <View style={schedule.weekView}>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 0
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayActive} index="1" number="02" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 1
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayActive} index="2" number="03" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 2
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayActive} index="3" number="04" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 3
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayActive} index="4" number="05" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 4
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayActive} index="5" number="06" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 5
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayActive} index="6" number="07" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 6
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayActive} index="7" number="08" />
            </TouchableOpacity>
          </View>

          <View style={schedule.weekView}>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 0
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayActive} index="1" number="09" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 1
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayActive} index="2" number="10" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 2
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayActive} index="3" number="11" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 3
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayActive} index="4" number="12" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 4
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayActive} index="5" number="13" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 5
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayActive} index="6" number="14" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 6
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayActive} index="7" number="15" />
            </TouchableOpacity>
          </View>

          <View style={schedule.weekView}>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 0
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayActive} index="1" number="16" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 1
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayActive} index="2" number="17" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 2
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayActive} index="3" number="18" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 3
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayActive} index="4" number="19" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 4
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayActive} index="5" number="20" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 5
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayActive} index="6" number="21" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 6
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayActive} index="7" number="22" />
            </TouchableOpacity>
          </View>

          <View style={schedule.weekView}>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 0
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayActive} index="1" number="23" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 1
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayActive} index="2" number="24" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 2
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayActive} index="3" number="25" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 3
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayActive} index="4" number="26" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 4
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayActive} index="5" number="27" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 5
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayActive} index="6" number="28" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 6
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayActive} index="7" number="29" />
            </TouchableOpacity>
          </View>

          <View style={schedule.weekView}>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 0
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayActive} index="1" number="30" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 1
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayInactive} index="2" number="01" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 2
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayInactive} index="3" number="02" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 3
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayInactive} index="4" number="03" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 4
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayInactive} index="5" number="04" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 5
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayInactive} index="6" number="05" />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  index: 6
                })
              }
              style={schedule.singlelWrapperAction}
            >
              <Day style={schedule.dayInactive} index="7" number="06" />
            </TouchableOpacity>
          </View>
        </ImageBackground>

        <View style={schedule.listWrapper}>
          {scheduleArrayDay.map((prop, key) => {
            return (
              <View style={schedule.listSingle} key={key}>
                <Text style={schedule.listSingleTime}>
                  {prop.training_time}
                </Text>
                <View style={schedule.listSingleDec}>
                  <Text style={schedule.listSingleDecRound} />
                  <Text style={schedule.listSingleDecLine} />
                  <Text style={schedule.listSingleDecLine} />
                  <Text style={schedule.listSingleDecLine} />
                </View>
                <Text style={schedule.listSingleTitle}>
                  {prop.training_title}
                </Text>
                <View style={schedule.listSinglePlaceWrapper}>
                  <Text style={schedule.listSinglePlaceLabel}>Location:</Text>
                  <Text style={schedule.listSinglePlace}>
                    {prop.training_place}
                  </Text>
                </View>
              </View>
            );
          })}
        </View>
      </ScrollView>
    );
  }
}

class ClientsScreen extends React.Component {
  static navigationOptions = {
    title: "ClientsPage"
  };

  constructor(props) {
    super(props);
    this.state = {
      isLoading: true
    };
  }

  async componentWillMount() {
    let clientsArray = await AsyncStorage.getItem("@User:signedClients");

    this.setState({
      isLoading: false,
      clientsArray: JSON.parse(clientsArray)
    });
  }

  render() {
    if (this.state.isLoading) {
      return <LoadingScreen />;
    }
    let clientsArray = this.state.clientsArray;
    return (
      <ScrollView style={clients.fullScreenContainer}>
        <StatusBar
          backgroundColor="transparent"
          barStyle="light-content"
          translucent
        />

        <View style={clients.header}>
          <Text style={clients.clientsTitle}>Clients List</Text>
        </View>

        {clientsArray.map((prop, key) => {
          return (
            <View style={clients.listWrapper} key={key}>
              <View style={clients.singlelWrapper}>
                <TouchableOpacity
                  onPress={() => {
                    const { navigate } = this.props.navigation;
                    navigate("ManagerChat", {
                      clientToken: prop.user_token,
                      clientAvatar: prop.avatar,
                      clientDisplayName: prop.display_name
                    });
                  }}
                  style={clients.singlelWrapperAction}
                >
                  <Image
                    source={{ uri: prop.avatar }}
                    style={clients.singleAvatar}
                  />
                  <View style={clients.singleContacts}>
                    <Text style={clients.singleName}>
                      {prop.user_firstname} {prop.user_lastname}
                    </Text>
                    <Text style={clients.singlelPhone}>{prop.nickname}</Text>
                  </View>
                </TouchableOpacity>
              </View>
            </View>
          );
        })}
      </ScrollView>
    );
  }
}

class TrainersScreen extends React.Component {
  static navigationOptions = {
    title: "TrainersPage"
  };

  constructor(props) {
    super(props);
    this.state = {
      isLoading: true
    };
  }

  async componentWillMount() {
    let trainersArray = await AsyncStorage.getItem("@User:signedTrainer");

    this.setState({
      isLoading: false,
      trainersArray: JSON.parse(trainersArray)
    });
  }

  render() {
    if (this.state.isLoading) {
      return <LoadingScreen />;
    }
    let trainersArray = this.state.trainersArray;

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

        <View style={trainers.header}>
          <Text style={trainers.trainersTitle}>Personal Trainers</Text>
        </View>

        {trainersArray.map((prop, key) => {
          return (
            <View style={trainers.listWrapper} key={key}>
              <View style={trainers.singlelWrapper}>
                <TouchableOpacity
                  onPress={() => {
                    const { navigate } = this.props.navigation;
                    navigate("ManagerChat", {
                      clientToken: prop.user_token,
                      clientAvatar: prop.avatar,
                      clientDisplayName: prop.display_name
                    });
                  }}
                  style={trainers.singlelWrapperAction}
                >
                  <Image
                    source={{ uri: prop.avatar }}
                    style={trainers.singleAvatar}
                  />
                  <View style={trainers.singleContacts}>
                    <Text style={trainers.singleName}>
                      {prop.user_firstname} {prop.user_lastname}
                    </Text>
                    <Text style={trainers.singlelPhone}>{prop.nickname}</Text>
                  </View>
                </TouchableOpacity>
              </View>
            </View>
          );
        })}
      </ScrollView>
    );
  }
}

class ManagerScreen extends React.Component {
  static navigationOptions = {
    title: "ManagerPage"
  };

  constructor(props) {
    super(props);
    this.state = {
      isLoading: true
    };
  }

  async componentWillMount() {
    let signedManager = await AsyncStorage.getItem("@User:signedManager");

    this.setState({
      isLoading: false,
      userManager: JSON.parse(signedManager)
    });
  }

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

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

        <View style={manager.managerHeader}>
          <ImageBackground
            source={{ uri: this.state.userManager.avatar }}
            style={manager.managerImage}
          >
            <Text style={manager.managerTitle}>
              {this.state.userManager.display_name}
            </Text>

            <Text style={manager.managerTitleDivider} />

            <Text style={manager.managerSubTitle}></Text>

            <Text style={manager.swiperTriangle} />
          </ImageBackground>
        </View>

        <Text style={manager.managerSubTitle}>Sales Manager</Text>

        <View style={manager.contactsWrapper}>
          <TouchableOpacity
            style={manager.contactItem}
            onPress={() =>
              Communications.phonecall(this.state.userManager.nickname, true)
            }
          >
            <Image
              source={require("./images/mobile_phone.png")}
              style={manager.contactIcon}
            />
            <Text style={manager.contactText}>
              {this.state.userManager.nickname}
            </Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={manager.contactItem}
            onPress={() =>
              Communications.email(
                [this.state.userManager.user_email],
                null,
                null,
                null,
                null
              )
            }
          >
            <Image
              source={require("./images/mail.png")}
              style={manager.contactIcon}
            />
            <Text style={manager.contactText}>
              {this.state.userManager.user_email}
            </Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={manager.contactItem}
            onPress={() => Communications.phonecall("022 01 10 21", true)}
          >
            <Image
              source={require("./images/local_phone.png")}
              style={manager.contactIcon}
            />
            <Text style={manager.contactText}>022 01 10 21</Text>
          </TouchableOpacity>

          <View style={styles.halfScreenContainer}>
            <TouchableOpacity
              onPress={() => {
                const { navigate } = this.props.navigation;
                navigate("Chat", {
                  chatToken: this.state.userManager.user_token
                });
              }}
              style={styles.halfWidthButton}
            >
              <Text style={[styles.fullWidthButtonLabel]}>Chat</Text>
            </TouchableOpacity>

            <TouchableOpacity
              onPress={() =>
                Communications.phonecall(this.state.userManager.nickname, true)
              }
              style={styles.halfWidthButtonBlue}
            >
              <Text style={styles.fullWidthButtonLabel}>Call Manager</Text>
            </TouchableOpacity>
          </View>
        </View>
      </ScrollView>
    );
  }
}

class ProfileScreen extends React.Component {
  static navigationOptions = {
    title: "ProfilePage"
  };

  constructor(props) {
    super(props);
    this.state = {
      isLoading: true
    };
  }

  async componentWillMount() {
    let isLoggedIn = await AsyncStorage.getItem("@User:isLoggedIn");
    let firstName = await AsyncStorage.getItem("@User:firstName");
    let lastName = await AsyncStorage.getItem("@User:lastName");
    let userSex = await AsyncStorage.getItem("@User:userSex");
    let userAvatar = await AsyncStorage.getItem("@User:userAvatar");
    let mobilePhone = await AsyncStorage.getItem("@User:mobilePhone");
    let clubCardType = await AsyncStorage.getItem("@User:clubCardType");
    let birthdayDate = await AsyncStorage.getItem("@User:birthdayDate");
    let email = await AsyncStorage.getItem("@User:email");

    if (isLoggedIn) {
      this.setState({
        isLoggedIn: isLoggedIn,
        lastName: lastName,
        firstName: firstName,
        userSex: JSON.parse(userSex),
        userAvatar: JSON.parse(userAvatar),
        mobilePhone: JSON.parse(mobilePhone),
        clubCardType: JSON.parse(clubCardType),
        birthdayDate: JSON.parse(birthdayDate),
        email: JSON.parse(email),
        isLoading: true,
        editUserLabelEdit: '',
        editInputMode: '',
      });
    }
    this.setState({
      isLoggedIn: isLoggedIn,
      isLoading: false
    });
  }

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

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

        <ImageBackground
          source={require("./images/header_profile.jpg")}
          style={profile.headerBackground}
        >
          <Image
            source={{ uri: this.state.userAvatar }}
            style={profile.profileAvatar}
          />
        </ImageBackground>

        <ScrollView style={profile.ProfileWrapper}>
          <View style={profile.infoboxUser}>
            <Text style={[profile.infoboxUserLabel]}>Name</Text>
            <Text style={[profile.infoboxUserValue]}>
              {this.state.firstName} {this.state.lastName}
            </Text>

          </View>

          <View style={profile.infoboxUser}>
            <Text style={[profile.infoboxUserLabel]}>Email</Text>
            <Text style={[profile.infoboxUserValue, this.state.editUserValueEdit]}>{this.state.email}</Text>

            <TextInput
              value={this.state.email}
              style={[profile.infoboxUserInput, this.state.editInputMode]}
              underlineColorAndroid="transparent"
              placeholder="Type something nice"
              onChangeText={text => this.setState({ email: text })}
            />
          </View>

          <View style={profile.infoboxUser}>
            <Text style={[profile.infoboxUserLabel]}>Phone number</Text>
            <Text style={[profile.infoboxUserValue, this.state.editUserValueEdit]}>
              {this.state.mobilePhone}
            </Text>
            <TextInput
              value={this.state.mobilePhone}
              style={[profile.infoboxUserInput, this.state.editInputMode]}
              underlineColorAndroid="transparent"
              placeholder="Type something nice"
              onChangeText={text => this.setState({ mobilePhone: text })}
            />
          </View>

          <View style={profile.infoboxUser}>
            <Text style={[profile.infoboxUserLabel]}>Sex</Text>
            <Text style={[profile.infoboxUserValue]}>{this.state.userSex}</Text>
          </View>

          <View style={profile.infoboxUser}>
            <Text style={[profile.infoboxUserLabel]}>Club Card</Text>
            <Text style={[profile.infoboxUserValue]}>
              {this.state.clubCardType}
            </Text>
          </View>

          <View style={profile.infoboxUser}>
            <Text style={[profile.infoboxUserLabel]}>Your birthday</Text>
            <Text style={[profile.infoboxUserValue]}>
              {this.state.birthdayDate}
            </Text>
          </View>

          <TouchableOpacity
            onPress={async () => {
              try {
                await AsyncStorage.removeItem("@User:isLoggedIn");
                await AsyncStorage.removeItem("@User:userID");
                await AsyncStorage.removeItem("@User:userRole");
                // BackAndroid.exitApp();

                const { navigate } = this.props.navigation;
                navigate("Middle");
              } catch (error) {
                // Error saving data
                const { navigate } = this.props.navigation;
                navigate("Middle");
              }
            }}
            style={profile.logoutWrapper}
          >
            <Text style={profile.logoutLabel}>Log Out</Text>
          </TouchableOpacity>

          <TouchableOpacity
            onPress={async () => {
              this.setState({
                editUserValueEdit: profile.infoboxUserValueEdit,
                editInputMode: profile.infoboxUserInputEdit,
              });
            }}
            style={profile.logoutWrapper}
          >
            <Text style={profile.logoutLabel}>Edit</Text>
          </TouchableOpacity>
        </ScrollView>
      </View>
    );
  }
}

/*
* Navigation array ( Start )
*/
const NiagaraApp = StackNavigator({
  Home: {
    screen: HomeScreen,
    headerMode: "none",
    headerLeft: null,
    header: null,
    navigationOptions: {
      header: null,
      headerLeft: null
    }
  },
  Web: {
    screen: WebScreen,
    headerMode: "none",
    headerLeft: null,
    header: null,
    navigationOptions: {
      header: null,
      headerLeft: null
    }
  },
  Login: {
    screen: LoginScreen,
    headerMode: "none",
    headerLeft: null,
    header: null,
    navigationOptions: {
      header: null,
      headerLeft: null
    }
  },
  OffersArchive: {
    screen: OffersArchiveScreen,
    headerLeft: null,
    headerMode: "none",
    header: null,
    navigationOptions: {
      header: null,
      headerLeft: null
    }
  },
  Offers: {
    screen: OffersScreen,
    headerLeft: null,
    headerMode: "none",
    header: null,
    navigationOptions: {
      header: null,
      headerLeft: null
    }
  },
  TrainingsArchive: {
    screen: TrainingsArchiveScreen,
    headerLeft: null,
    headerMode: "none",
    header: null,
    navigationOptions: {
      header: null,
      headerLeft: null
    }
  },
  Trainings: {
    screen: TrainingsScreen,
    headerLeft: null,
    headerMode: "none",
    header: null,
    navigationOptions: {
      header: null,
      headerLeft: null
    }
  },
  Schedule: {
    screen: ScheduleScreen,
    headerLeft: null,
    headerMode: "none",
    header: null,
    navigationOptions: {
      header: null,
      headerLeft: null
    }
  },
  Manager: {
    screen: ManagerScreen,
    headerLeft: null,
    headerMode: "none",
    header: null,
    navigationOptions: {
      header: null,
      headerLeft: null
    }
  },
  Clients: {
    screen: ClientsScreen,
    headerLeft: null,
    headerMode: "none",
    header: null,
    navigationOptions: {
      header: null,
      headerLeft: null
    }
  },
  Trainers: {
    screen: TrainersScreen,
    headerLeft: null,
    headerMode: "none",
    header: null,
    navigationOptions: {
      header: null,
      headerLeft: null
    }
  },
  Profile: {
    screen: ProfileScreen,
    headerLeft: null,
    headerMode: "none",
    header: null,
    navigationOptions: {
      header: null,
      headerLeft: null
    }
  },
  Chat: {
    screen: ChatScreen,
    headerLeft: null,
    headerMode: "none",
    header: null,
    navigationOptions: {
      header: null,
      headerLeft: null
    }
  },
  Virtual: {
    screen: VirtualScreen,
    headerLeft: null,
    headerMode: "none",
    header: null,
    navigationOptions: {
      header: null,
      headerLeft: null
    }
  },
  Faq: {
    screen: FaqScreen,
    headerLeft: null,
    headerMode: "none",
    header: null,
    navigationOptions: {
      header: null,
      headerLeft: null
    }
  },
  ManagerChat: {
    screen: ManagerChatScreen,
    headerLeft: null,
    headerMode: "none",
    header: null,
    navigationOptions: {
      header: null,
      headerLeft: null
    }
  },
  Middle: {
    screen: MiddleScreen,
    headerLeft: null,
    headerMode: "none",
    header: null,
    navigationOptions: {
      header: null,
      headerLeft: null
    }
  }
});
// Navigation array ( End )

export default NiagaraApp;