import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, SafeAreaView } from "react-native";
import { observer, inject } from "mobx-react/native";
import { observable } from "mobx";
import DrawerNavigationHeader from "../../components/Public/drawerNavigationHeader";
import OrderFlatList from "../../components/MyOrders/orderFlatList";
import ScrollableTabView from "react-native-scrollable-tab-view";
import AsyncStorageHelper from "../../config/asyncStorageHelper";
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
import Loader from "../../components/Public/loader";
import Login from "../Login/login";
import Log from "../../config/log"
import { width, height } from "../../config/screen";
import Header from '../../components/Public/signInUpHeader'
import theme from "../../config/colors";
import language from "../../config/language";
const log = new Log()
const asyncStorageHelper = new AsyncStorageHelper();
@inject(["menuStore"], ["userStore"])
@observer
export default class MyOrders extends Component {
  constructor(props) {
    super(props);
    this.store = this.props.menuStore;
    this.userStore = this.props.userStore;
  }
  static navigationOptions = {
    drawerLabel: "My Orders",
    swipeEnabled: false,
    tabBarLabel: "My Order"
  };

  componentWillMount() {
 //   this.init();
  }



  init() {
    if (this.userStore.logined == false) {
      //   this.props.navigation.navigate('Login')
    } else {
      var token = this.userStore.userData.data.token;
      this.store.getOrder(this, token);
    }
  }

  componentDidMount(){
    log.firebaseClass('orders')
    console.log('componentDidMount')
    this.props.navigation.addListener('willFocus', (route) => {this.init()});
  }

  render() {
    console.log(this.store.passOrder);
    return (
      <SafeAreaView style={{ backgroundColor: theme.mainColor, flex: 1 }}>
        <Loader loading={this.store.loading} />
        <View style={styles.container}>
        
          <ScrollableTabView
            tabBarActiveTextColor={theme.mainColor}
            tabBarUnderlineStyle={{ backgroundColor: "white", height: 1 }}
            tabBarBackgroundColor={"white"}
          >
            <CurrentOrder
              tabLabel="Current Order"
              orderHistory={this.store.currentOrder}
              navigation={this.props.navigation}
              whichOrder = {true}
            />
            <PassOrder
              tabLabel="Past Order"
              orderHistory={this.store.passOrder}
              navigation={this.props.navigation}
              whichOrder = {false}
            />
          </ScrollableTabView>
        </View>
      </SafeAreaView>
    );
  }
}

const PassOrder = props => {
  return (
    <View>
      <View
        style={{
          marginTop: 20,
          alignItems: "center",
          flexDirection: "row",
          backgroundColor: "white",
          width: width - 1
        }}
      >
        
      </View>
      <View style={styles.flatViewContainer}>
        <OrderFlatList
          whichOrder = {props.whichOrder}
          data={props.orderHistory}
          navigation={props.navigation}
        />
      </View>
    </View>
  );
};
const CurrentOrder = props => {
  return (
    <View>
      {/* <View
        style={{
          marginTop: 20,
          alignItems: "center",
          flexDirection: "row",
          backgroundColor: "white",
          width: width - 1
        }}
      >
        <View style={{ width: "65%" }}>
          <Text
            style={[styles.textView, { fontWeight: "bold" }]}
            numberOfLines={1}
          >
            Order details
          </Text>
        </View>

        <View style={{ width: "45%" }}>
          <Text style={[styles.textView, { fontWeight: "bold" }]}>Status</Text>
        </View>
      </View> */}
      <View style={styles.flatViewContainer}>
        <OrderFlatList
          data={props.orderHistory}
          navigation={props.navigation}
          whichOrder = {props.whichOrder}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white",
    ...Platform.select({
      android: {
        marginTop: verticalScale(30)
      }
    })
  },
  flatViewContainer: {
    height: "98%",
    width: "100%",
    alignItems: "center",
    marginBottom: 40
  },
  textView: {
    marginLeft: scale(15),
    marginBottom: scale(5)
  }
});