import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Alert,
  SafeAreaView
} from "react-native";
import { observable } from "mobx";
import { observer, inject } from "mobx-react/native";
import ScrollableTabView from "react-native-scrollable-tab-view";
//component
import DrawerNavigationHeader from "../../components/Public/drawerNavigationHeader";
import AccountSettings from "./accountSettings";
import Login from "../Login/login";
import Payment from "./payment";
import Header from '../../components/Public/signInUpHeader'
// function
import { width, height } from "../../config/screen";
import Log from '../../config/log'
import theme from "../../config/colors";
import {Fonts} from '../../config/fonts'
import AsyncStorageHelper from "../../config/asyncStorageHelper";
import language from "../../config/language";
const asyncStorageHelper = new AsyncStorageHelper();
const log = new Log()
@inject(["menuStore"], ["userStore"])
@observer
export default class Account extends Component {

  constructor(props) {
    super(props);
    this.store = this.props.userStore;
    this.menuStore = this.props.menuStore;
  }

  @observable
  static navigationOptions = {
    drawerLabel: "Account",
    swipeEnabled: false,
    tabBarLabel: language.en.profile,
  };


  componentWillMount() {
   this.init();
  }

  init() {
    console.log(this.store.logined)
    if (!this.store.logined) {
   //   this.props.navigation.navigate("Login");
    } else {
    }
  }

  changeIndex(index) {
    this.tabMap.index = index;
  }

  logoutAlert() {
    Alert.alert(
      "Logout",
      "Are you sure to Logout?",
      [
        {
          text: "Cancel",
          onPress: () => console.log("Cancel Pressed"),
          style: "cancel"
        },
        { text: "Sure", onPress: () => this.logoutAction() }
      ],
      { cancelable: false }
    );
  }

  logoutAction() {
    this.store.logoutPost(this);
  }
  navigatieAction(page) {
    this.props.navigation.navigate(page);
  }

  render() {
    log.firebaseClass('profile')
      return (
        <SafeAreaView style={{ backgroundColor: theme.mainColor, flex: 1 }}>
          <View style={styles.container}>
           <Header navigation = {this.props.navigation}/>
            <ScrollableTabView
           style={{marginTop: 20, }}
            tabBarTextStyle = {{fontFamily:Fonts.century,fontWeight:'bold'}}
             tabBarActiveTextColor={theme.mainColor}
             tabBarUnderlineStyle={{ backgroundColor: "white", height: 1 }}
             tabBarBackgroundColor={"white"}>
              <AccountSettings
                tabLabel="My Information"
                navigation={this.props.navigation}
              />
              <Payment tabLabel="Credit card details" navigation={this.props.navigation} />
            </ScrollableTabView>
          </View>
        </SafeAreaView>
      );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    height: height,
    width: width
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5
  }
});