//plugin
import React, { Component } from "react";
import Text from "react-native-text";
import { View, FlatList, TouchableOpacity, StyleSheet,Linking } from "react-native";
import Icon from "react-native-vector-icons/dist/Ionicons";
import { observer, inject } from "mobx-react/native";
import FastImage from "react-native-fast-image";
import { width, height } from "../../config/screen";
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
// function
import Size from "../../config/size";
import theme from "../../config/colors";
import { Fonts } from "../../config/fonts";

var size = new Size();
@inject(["menuStore"], ["userStore"])
@observer
export default class OrderListItems extends Component {
  constructor(props) {
    super(props);
    this.store = this.props.menuStore;
    this.userStore = this.props.userStore;
  }

  foodName() {
    var name = "";
    if (this.props.items.items.length == 1) {
      name = this.props.items.items[0].menu.cuisine.name;
    } else {
      this.props.items.items.forEach(element => {
        name += element.menu.cuisine.name + ", ";
      });
    }
    return name;
  }

  linkToEmail(){
    Linking.openURL('mailto:support@hangryfood.co?subject=&body=')
  }

  food(items) {
    return (
      <View style = {{marginBottom:6}}>
        <View style = {{flexDirection:'row'}}>
        
        <View style = {{width:'40%'}}>
         <Text style = {[styles.textView,{color:theme.coolGrey,fontSize:10,fontWeight:'bold'}]}>
          Food name
         </Text>
        </View>
        <View style = {{width:'60%'}}>
        <Text style = {[styles.textView,{color:theme.coolGrey,fontSize:10}]}>
          {this.userStore.dataLanguage(
                      items.menu.cuisine,
                      "name"
                    )}
         </Text>
        </View>
        </View>
        <View style = {{flexDirection:'row'}}>
       
        <View style = {{width:'40%'}}>
         <Text style = {[styles.textView,{color:theme.coolGrey,fontSize:10,fontWeight:'bold'}]}>
          Restauant
         </Text>
        </View>
        <View style = {{width:'60%'}}>
        <Text style = {[styles.textView,{color:theme.coolGrey,fontSize:10}]}>
          {this.userStore.dataLanguage(
                      items.menu.cuisine.restaurant,
                      "name"
                    )}
         </Text>
        </View>
        </View>
        <View style = {{flexDirection:'row',paddingLeft:20}}>
       
       <View style = {{width:'33%',flexDirection:'row'}}>
        <Text style = {{color:theme.coolGrey,fontSize:10,fontWeight:'bold',fontFamily: Fonts.century}}>
         Qty.
        </Text>
        <Text style = {{color:theme.coolGrey,fontSize:10,fontFamily: Fonts.century,paddingLeft:4}}>
        {items.qty}
        </Text>
       </View>
       <View style = {{width:'33%',flexDirection:'row'}}>
       <Text style = {{color:theme.coolGrey,fontSize:10,fontWeight:'bold',fontFamily: Fonts.century}}>
         Price
        </Text>
        <Text style = {{color:theme.coolGrey,fontSize:10,fontFamily: Fonts.century,paddingLeft:4}}>
        {"$"+items.price}
        </Text>
       </View>

        <View style = {{width:'33%',flexDirection:'row'}}>
        <Text style ={{color:theme.coolGrey,fontSize:10,fontWeight:'bold',fontFamily: Fonts.century}}>
         Subtatal
        </Text>
        <Text style = {{color:theme.coolGrey,fontSize:10,fontFamily: Fonts.century,paddingLeft:4}}>
       { "$"+items.price*items.qty}
        </Text>
       </View>
       </View>
      </View>
    );
  }

  discountHandle(){
    if(this.props.items.discount >0){
     return(
      <Text style = {[styles.textView,{color:theme.coolGrey,fontSize:10}]}>
      {"- "+this.props.items.discount}
     </Text>
     )
    }else{
      return(
        <Text style = {[styles.textView,{color:theme.coolGrey,fontSize:10}]}>
        N/A
       </Text>
       )
    }
  }
  clickAction() {
    if(this.props.whichOrder){
      this.store.goOrderDetail(this.props.items,this)
    }
   
    //this.props.navigation.navigate("OrderDetails", { data: this.props.items });
  }

  go(data,time){
this.props.navigation.navigate("OrderDetails", { data: data, time: time });
  }

  render() {
    console.log("show up " + this.props.items.status);
    if (this.props.items.status != "E") {
      return (
        <View
          style={{
            marginBottom: 10,
            alignItems: "center",
            backgroundColor: "white",
            width: width - 1
          }}
        >
          <TouchableOpacity
            onPress={() => this.clickAction()}
            style={{
              flexDirection: "row"
            }}
          >
            <View style={{ width: "65%" }}>
            <Text style={[styles.textView, { fontWeight: "bold",color:theme.coolGrey,fontSize:16}]}>
               Order details
              </Text>
              <Text
                style={[
                  styles.textView,
                  { fontSize: 10, fontWeight: "bold", color: theme.mainColor }
                ]}
              >
                {"Order No: " + this.props.items.id}
              </Text>
              {this.props.items.items.map((items, key) => {
                return <View>{this.food(items)}</View>;
              })}
              <View style = {{flexDirection:'row'}}>
              <View style = {{width:'40%'}}>
              <Text style = {[styles.textView,{color:theme.coolGrey,fontSize:10,fontWeight:'bold'}]}>
          Pick up Point
         </Text>
              </View>
              <View style = {{width:'60%'}}>
              <Text style = {[styles.textView,{color:theme.coolGrey,fontSize:10}]}>
          {this.userStore.dataLanguage(
                      this.props.items.pickUpLocation,
                      "name"
                    )}
         </Text>
              </View>
              </View>

              <View style = {{flexDirection:'row'}}>
              <View style = {{width:'40%'}}>
              <Text style = {[styles.textView,{color:theme.coolGrey,fontSize:10,fontWeight:'bold'}]}>
          Discount
         </Text>
              </View>
              <View style = {{width:'60%'}}>
              {this.discountHandle()}
              </View>
              </View>

               <View style = {{flexDirection:'row'}}>
              <View style = {{width:'30%'}}>
              <Text style = {[styles.textView,{color:theme.coolGrey,fontSize:10,fontWeight:'bold',fontSize:16}]}>
         Total
         </Text>
              </View>
              <View style = {{width:'50%'}}>
              <Text style={[styles.textView, { fontWeight: "bold",color:theme.coolGrey,fontSize:16}]}>
                HKD$ {this.props.items.payAmount}
              </Text>
              </View>
              </View>

        
            </View>

            <View
              style={{
                width: "35%",
                flex: 1,
                justifyContent: "space-between"
              }}
            >
            <Text style={[styles.textView, { fontWeight: "bold",color:theme.coolGrey,fontSize:16}]}>
              Status
              </Text>
          
                <View
                  style={{
                    flex: 1,
                    justifyContent: "space-between"
                  }}
                >
                  <View>
                    <Text style={{ fontFamily: Fonts.century,fontSize:16,color:theme.coolGrey,marginLeft:20}}>
                      {size.status(this.props.items.status)}
                    </Text>
                  </View>
                  <TouchableOpacity
                  onPress = {()=>this.linkToEmail()}
                    style={{
                      backgroundColor: theme.mainColor,
                      alignItems: "center",
                      justifyContent: "center",
                      marginLeft:20,
                      width: scale(80),
                      height: verticalScale(20),
                      borderRadius: 4,
                      marginBottom: 5
                    }}
                  >
                    <Text style={{ color: "white", fontWeight: "bold" }}>
                      contact us
                    </Text>
                  </TouchableOpacity>
                </View>
            
            </View>
          </TouchableOpacity>
          <View
            style={{
              width: "70%",
              backgroundColor: "gray",
              height: 1,
              marginTop: 10
            }}
          />
        </View>
      );
    } else {
      return null;
    }
  }
}

const styles = StyleSheet.create({
  textView: {
    marginLeft: 20,
    fontFamily: Fonts.century,
    marginBottom: 5
  }
});