//plugin
import React, { Component } from "react";
import Text from "react-native-text";
import {
  StyleSheet,
  View,
  FlatList,
  TouchableOpacity,
  Image
} from "react-native";
import { observable, transaction } from "mobx";
import { width, height } from "../../config/screen";
import Icon from "react-native-vector-icons/dist/MaterialCommunityIcons";
import { observer, inject } from "mobx-react/native";
import FastImage from "react-native-fast-image";
import firebase from "react-native-firebase";
import Log from '../../config/log'
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();
var log = new Log();
@inject(["menuStore"], ["userStore"])
@observer
export default class ListItem extends Component {
  @observable 
  soldout = false
  constructor(props) {
    super(props);
    this.store = this.props.menuStore;
    this.userStore = this.props.userStore;
  }

  recommended() {
    return (
      <Image
        style={{
          position: "absolute",
          top: -5,
          left: -5,
          height: verticalScale(100),
          width: scale(110)
        }}
        resizeMode={"contain"}
        source={require("../../images/recommendation.png")}
      />
    );
  }
  
  componentDidMount(){
    if(this.props.items.quota - this.props.items.sold == 0){
      this.soldout = true
    }else{
      this.soldout = false
    }
  }
  foodAttributes() {
    return (
      <View
        style={{
          position: "absolute",
          top: -5,
          right: 5
        }}
      >
        <Image
          style={{ height: verticalScale(40), width: scale(40) }}
          source={require("../../images/spicy.png")}
        />
        <Image
          style={{ height: verticalScale(40), width: scale(40) }}
          source={require("../../images/vegetarian.png")}
        />
      </View>
    );
  }

  add() {
    if(!this.soldout){
    this.store.addCount(this.props.items.id);
    }
  }

  sum() {
    if(!this.soldout){
    this.store.sumCount(this.props.items.id);
    }
  }

  onClickAction() {
    transaction(() => {
      this.store.menuDetails.id = this.props.items.id;
      if (!this.userStore.logined) {
        this.store.menuDetails.tel = "";
      } else {
        this.store.menuDetails.tel = this.userStore.userData.data.mobile;
      }
      this.store.menuDetails.count = this.props.items.count;
      this.store.menuDetails.price = this.props.items.price;
      this.store.menuDetails.imageURL = this.props.items.cuisine.photo;
      this.store.menuDetails.name = this.props.items.cuisine.name;
      this.store.menuDetails.nameEn = this.props.items.cuisine.nameEn;
      this.store.menuDetails.tags = this.props.items.cuisine.tags;
      this.store.menuDetails.intro_ch = this.props.items.cuisine.description;
      this.store.menuDetails.intro_en = this.props.items.cuisine.descriptionEn;
      this.store.menuDetails.restaurant.name = this.props.items.cuisine.restaurant.name;
      this.store.menuDetails.restaurant.nameEn = this.props.items.cuisine.restaurant.nameEn;
      this.store.menuDetails.restaurant.addr = this.props.items.cuisine.restaurant.addr;
      this.store.menuDetails.restaurant.addrEn = this.props.items.cuisine.restaurant.addrEn;
    });
    this.props.menu.foodInformationPagePopUp();
   // firebase.analytics().logEvent('click_food_details', { foodName: this.store.menuDetails.nameEn });
    log.firebaseLog('click_food_details',{foodName: this.store.menuDetails.nameEn,logined: this.userStore.logined})
  }

  getViewStye() {
    if(this.props.index == this.store.menu.data.content.length-1) {
     return {
      marginBottom: 80, alignItems: "center" 
     }
    } else {
      return {
        marginBottom: 20, alignItems: "center" 
      }
    }
   }

  render() {
    
    var lang = this.userStore.languageSelection;
    return (
      <View style={this.getViewStye()}>
        <TouchableOpacity
          style={{
            width: width,
            height: verticalScale(210),
            alignItems: "center",
            justifyContent: "center"
          }}
          onPress={() => this.onClickAction()}
        >
          <FastImage
            style={{
              width: this.props.screenWidth - scale(25),
              height: verticalScale(200),
              backgroundColor: theme.mainColor
            }}
            source={{ uri: this.props.items.cuisine.photo }}
          >
            <View
              style={{
                backgroundColor: theme.menuPriceBoxBackgroundColor,
                alignItems: "center",
                justifyContent: "center",
                height: verticalScale(40),
                width: scale(100),
                flexDirection: "row",
                position: "absolute",
                right: 0,
                top: 0
              }}
            >
              <Text
                style={{
                  color: theme.foodNameColor,
                  fontWeight: "bold",
                  fontSize: 20,
                  fontFamily: "CenturyGothic"
                }}
                numberOfLines={1}
              >
                HKD ${this.props.items.price}
              </Text>
            </View>
            {
              this.soldout?(  <View
                style={{
                  position: "absolute",
                  backgroundColor: "rgba(255,183,23,0.7)",
                  alignItems: "center",
                  justifyContent: "center",
                  width: this.props.screenWidth - scale(25),
                  height: verticalScale(200),
                }}
             >
              <Text
                  style={{
                    color: 'white',
                    fontWeight: "bold",
                    fontSize: 30,
                    fontFamily: "CenturyGothic",
                    marginBottom:verticalScale(35)
                  }}
                  numberOfLines={1}
                >
                 Sold out
                </Text>
             </View>):(
               <View/>
             )
          
            }
          </FastImage>
        </TouchableOpacity>

        {/* <View
          style={{
            width: this.props.screenWidth - 10,
            height: verticalScale(70),
            borderColor: "gray",
            borderWidth: 1,
            alignItems: "center"
          }}
        >
          <Text style={{ marginTop: 20 }} numberOfLines={2}>
            {this.props.items.cuisine.description}
            || {this.props.items.cuisine.descriptionEn}
          </Text>
        </View> */}

        <View
          style={{
            width: this.props.screenWidth - 25,
            justifyContent: "center",
            alignItems: "center",
            height: verticalScale(50),
            backgroundColor: theme.menuPriceBoxBackgroundColor,
            flexDirection: "row",
            position: "absolute",
            bottom: verticalScale(0)
          }}
        >
          <View
            style={{
              width: "65%",
              height: "100%",
              paddingLeft: scale(10),
              borderTopLeftRadius: verticalScale(25),
              borderBottomLeftRadius: verticalScale(25),
              justifyContent: "center"
            }}
          >
            <Text
              style={{
                color: theme.foodNameColor,
                fontFamily: Fonts.century,
                fontWeight: "bold"
              }}
              numberOfLines={1}
            >
              {this.userStore.dataLanguage(this.props.items.cuisine, "name")}
            </Text>

            <Text
              style={{
                color: theme.foodNameColor,
                fontFamily: Fonts.century,
                fontSize: 11
              }}
              numberOfLines={1}
            >
              {this.userStore.dataLanguage(
                this.props.items.cuisine.restaurant,
                "name"
              )}
            </Text>
          </View>

          <View
            style={{
              width: "35%",
              height: "100%",
              borderTopRightRadius: verticalScale(25),
              borderBottomRightRadius: verticalScale(25),
              justifyContent: "space-between",
              alignItems: "center",
              flexDirection: "row"
            }}
          >
            <Icon
              name="minus-circle-outline"
              size={size.getSize(24)}
              color={theme.foodNameColor}
              style={{ marginLeft: moderateScale(20) }}
              onPress={() => this.sum()}
            />
            <Text
              style={{ color: theme.foodNameColor, fontFamily: Fonts.century }}
            >
              {this.props.items.count}
            </Text>
            <Icon
              name="plus-circle-outline"
              size={size.getSize(24)}
              color={theme.foodNameColor}
              style={{ marginRight: moderateScale(20) }}
              onPress={() => this.add()}
            />
          </View>
        </View>
      </View>
    );
  }
}