import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  View,
  ScrollView,
  TouchableOpacity,
  SafeAreaView,
  Image
} from "react-native";
import Text from "react-native-text";
import { observer, inject } from "mobx-react/native";
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
import Log from "../../config/log";
import theme from "../../config/colors";
import Size from "../../config/size";
import { Fonts } from "../../config/fonts";
import Icon2 from "react-native-vector-icons/dist/MaterialCommunityIcons";
import Loader from "../../components/Public/loader";
import moment from "moment";
import Toast, { DURATION } from "react-native-easy-toast";
import Header from "../../components/Public/header";
import CardView from "react-native-cardview";
import { width, height } from "../../config/screen";
const log = new Log();
const size = new Size();
@inject(["menuStore"], ["userStore"])
@observer
class MyCoupons extends Component {
  constructor(props) {
    super(props);
    this.store = this.props.menuStore;
    this.userStore = this.props.userStore;
  }

  back() {
    this.props.navigation.goBack();
  }
  exiryDate(item) {
    if (item.hasOwnProperty("expiry")) {
      var nowDatemoment = moment(this.store.coupons.data.timestamp);
      var nowDate = nowDatemoment.toDate();
      var expiryDatemoment = moment(item.expiry);
      var expiryDate = expiryDatemoment.toDate();
      if (nowDate < expiryDate) {
        return item.expiry;
      } else {
        return item.expiry + "(" + this.userStore.text.expired + ")";
      }
    } else {
      return "N/A";
    }
  }
  checking(item) {
    if (item.used) {
      return this.userStore.text.used;
    } else {
      if (item.hasOwnProperty("expiry")) {
        var nowDatemoment = moment(this.store.coupons.data.timestamp);
        var nowDate = nowDatemoment.toDate();
        var expiryDatemoment = moment(item.expiry);
        var expiryDate = expiryDatemoment.toDate();
        if (nowDate < expiryDate) {
          return this.userStore.text.canuse;
        } else {
          return this.userStore.text.cannotuse;
        }
      } else {
        return this.userStore.text.canuse;
      }
    }
  }

  renderCoupons() {
    return this.store.coupons.data.content.map((item, index, array) => {
      return (
        <CardView
          cardElevation={5}
          cardMaxElevation={5}
          cornerRadius={5}
          style={{
            marginBottom: 20,
            marginTop: 20,
            marginLeft: 25,
            marginRight: 25,
            backgroundColor: theme.mainColor
          }}
        >
          <Text
            style={{
              fontSize: 30,
              fontFamily: Fonts.century,
              color: "white",
              paddingLeft: 10
            }}
          >
            Coupon
          </Text>
          <View
            style={{
              flexDirection: "row",
              justifyContent: "space-between",
              marginTop: 10
            }}
          >
            <Image
              style={{
                height: scale(70),
                width: scale(70),
                tintColor: "white",
                marginLeft: 10
              }}
              source={require("../../images/appicon.png")}
            />
            <View style={{ alignItems: "flex-end" }}>
              <Text
                style={{
                  fontSize: 15,
                  fontFamily: Fonts.century,
                  color: "white",
                  paddingRight: 10
                }}
              >
                {item.id}
              </Text>

              <Text
                style={{
                  fontSize: 15,
                  fontFamily: Fonts.century,
                  color: "white",
                  paddingRight: 10,
                  paddingTop: 10
                }}
              >
                {this.checking(item)}
              </Text>
            </View>
          </View>
          <View style={{ alignItems: "flex-end",paddingRight:10,marginTop:10,marginBottom:5 }}>
            <Text style={{ color: "white", fontSize: 15 }}>
              {this.userStore.text.expireDate + ": " + this.exiryDate(item)}
            </Text>
          </View>
        </CardView>
      );
    });
  }

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

  render() {
    log.firebaseClass("MyCoupons");
    return (
      <SafeAreaView
        style={{ flex: 1, backgroundColor: theme.mainColor, width: width }}
      >
        <Loader loading={this.userStore.loading} />
        <View style={{ height: verticalScale(40) }}>
          <Icon2
            name="chevron-left"
            size={size.getSize(40)}
            color={"white"}
            style={{ marginLeft: 10 }}
            onPress={() => this.props.navigation.goBack()}
          />
        </View>

        <ScrollView
          style={{
            width: width,
            backgroundColor: "white"
          }}
        >
          <View
            style={{
              backgroundColor: "white",
              width: width,
              marginTop: 25
            }}
          >
            {this.renderCoupons()}
          </View>
        </ScrollView>
        <Toast ref="toast" />
      </SafeAreaView>
    );
  }
}

export default MyCoupons;