import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  View,
  TouchableOpacity,
  Alert,
  SafeAreaView,
  Text
} from "react-native";
import { observable, action, transaction } from "mobx";
import { Button } from "react-native-elements";
import { observer, inject } from "mobx-react"

import { scale, verticalScale, moderateScale } from "react-native-size-matters";
import Icon from "react-native-vector-icons/dist/Ionicons";
import Icon2 from "react-native-vector-icons/dist/MaterialCommunityIcons";
import Toast, { DURATION } from "react-native-easy-toast";
import BackHeader from '../../components/backHeader'
import LoadingView from '../../common/loading';
import {
  CreditCardInput,
  LiteCreditCardInput
} from "react-native-credit-card-input";
//component

// function
import { width, height } from "../../common/screen";
import { colors } from "../../assets/styles/colors-theme";
import { Fonts } from '../../assets/styles/fonts-theme'
import Size from "../../common/size";
const size = new Size();
//const log = new Log()
@inject("appStore")
@observer
export default class Payment extends Component {
  @observable
  menu = false;
  @observable
  addCard = false;
  cardData = null;

  static navigationOptions = {
    drawerLabel: "Account"
  };

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

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

  addCardAction() {
    var BreakException = {};
    if (this.cardData != null) {
      if (this.cardData.valid) {
        let data = {
          num: this.cardData.values.number.replace(/\s/g, ""),
          expiry: this.cardData.values.expiry.replace("/", ""),
          cvc: this.cardData.values.cvc
        };

        console.log(this.cardData);
       // log.firebaseLog('press_add_button_on_creditCard_progress',{})
        this.store.postCreditCard(this, data);
      } else {
        try {
          Object.keys(this.cardData.status).forEach(e => {
            console.log(e + " - " + this.cardData.status[e]);
            if (
              this.cardData.status[e] == "incomplete" ||
              this.cardData.status[e] == "invalid"
            ) {
              this.refs.toast.show(e + " " + this.cardData.status[e]);
              throw BreakException;
            }
          });
        } catch (e) {
          if (e !== BreakException) throw e;
        }
      }
    } else {
      console.log("error");
      this.refs.toast.show("please insert card number");
    }
  }

  testing(token, data) {
    Alert.alert(token, data, { text: "ok", onPress: () => console.log("ok") });
  }
  @action
  removeCard() {
    Alert.alert("", "Are you sure? ", [
      { text: "Cancel", onPress: () => console.log("Cancel") },
      {
        text: "Sure",
        onPress: () => this.store.deleCreditCard(this)
      }
    ]);
  }



  render() {
    return (
      <View style={{ flex: 1, backgroundColor: colors.mainColor }}>
        <View style={styles.container}>

        <LoadingView visible={this.store.loading} />
         
                <BackHeader instance={this} back={true} />
          {!this.store.addedCard ? (
            <View>
              <View
                style={{
                  alignItems: "center",
                  marginTop: 20,
                  marginRight: 30,
                  marginLeft: 30,
                  flexDirection: "row"
                }}
              >
                <View style={{ width: "25%", alignItems: "flex-start" }}>
                  <Icon
                    name="ios-card"
                    size={size.getSize(45)}
                    color={colors.textColor}
                  />
                </View>
                <TouchableOpacity
                  style={{
                    width: "75%",
                    height: verticalScale(40),
                    alignItems: "center",
                    borderWidth: 2,
                    borderColor:colors.textColor,
                    borderRadius: 5,
                    justifyContent: "center"
                  }}
                  onPress={() => {
                    this.addCard = true;
                   // log.firebaseLog('press_add_creditCard_button',{})
                  }}
                >
                  <Text
                    style={{
                      fontSize: 15,
                      fontFamily: Fonts.century,
                      color: colors.textColor,
                      fontWeight: "bold"
                    }}
                  >
                    Add credit card
                  </Text>
                </TouchableOpacity>
              </View>
              {this.addCard ? (
                <View>
                  <LiteCreditCardInput
                    autoFocus
                    labelStyle={styles.label}
                    inputStyle={styles.input}
                    validColor={"black"}
                    invalidColor={"red"}
                    placeholderColor={"darkgray"}
                    onChange={form => (this.cardData = form)}
                  />

                  <View
                    style={{
                      justifyContent: "space-between",
                      marginTop: 20,
                      marginRight: 30,
                      marginLeft: 30,
                      flexDirection: "row"
                    }}
                  >
                    <TouchableOpacity
                      style={{
                        width: "45%",
                        alignItems: "center",
                        justifyContent: "center",
                        borderWidth: 2,
                        borderColor: colors.textColor,
                        borderRadius: 5,
                        height: verticalScale(40)
                      }}
                      onPress={() => {
                        this.addCardAction();
                      }}
                    >
                      <Text style = {styles.textView}>Add</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                      style={{
                        width: "45%",
                        alignItems: "center",
                        justifyContent: "center",
                        borderWidth: 2,
                        borderColor: colors.textColor,
                        borderRadius: 5,
                        height: verticalScale(40)
                      }}
                      onPress={() => {
                        this.addCard = false;
                        this.cardData = null;
                       // log.firebaseLog('press_cancel_button_on_creditCard_progress',{})
                      }}
                    >
                      <Text style ={styles.textView}>CANCEL</Text>
                    </TouchableOpacity>
                  </View>
                </View>
              ) : (
                <View />
              )}
            </View>
          ) : (
            <View
              style={{
                alignItems: "center",
                marginTop: 20,
                marginRight: 30,
                marginLeft: 30,
                flexDirection: "row"
              }}
            >
              <View style={{ width: "25%", alignItems: "flex-start" }}>
                <Icon
                  name="ios-card"
                  size={size.getSize(45)}
                  color={colors.textColor}
                />
              </View>

              <View
                style={{
                  width: "75%",
                  height: verticalScale(40),
                  alignItems: "center",
                  flexDirection: "row",
                  borderWidth: 2,
                  borderColor: colors.textColor,
                  borderRadius: 5,
                  justifyContent: "space-between"
                }}
                onPress={() => {
                  this.addCard = true;
                }}
              >
                <Text
                  style={{
                    fontSize: 15,
                    paddingLeft: scale(20),
                    fontFamily: Fonts.century,
                    color: colors.textColor,
                    fontWeight: "bold"
                  }}
                >
                  {this.store.creditCardinfo.num}
                </Text>
                <TouchableOpacity
                  style={{ justifyContent: "center",alignItems:'center' }}
                  onPress={() => (this.menu = !this.menu)}
                >
                  <Icon2
                    name="dots-vertical"
                    size={size.getSize(30)}
                    color={colors.textColor}
                    style={{ marginLeft: 10 }}
                  />
                </TouchableOpacity>
              </View>
            </View>
          )}

          {this.menu ? (
            <View
              style={{
                justifyContent: "space-between",
                width:width,
                marginTop: 20,
                marginRight: 30,
                marginLeft: 30,
                flexDirection: "row"
              }}
            >

                 
                    <TouchableOpacity
                      style={{
                        width: "40%",
                        alignItems: "center",
                        justifyContent: "center",
                        borderWidth: 2,
                        marginLeft: 30,
                        borderColor: colors.textColor,
                        borderRadius: 5,
                        height: verticalScale(40)
                      }}
                      onPress={() => {
                        this.removeCard();
                        this.menu = !this.menu;
                     //   log.firebaseLog('press_remove_card_button',{})
                      }}
                    >
                      <Text>Remove Card</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                      style={{
                        width: "40%",
                        alignItems: "center",
                        justifyContent: "center",
                        borderWidth: 2,
                        marginRight: 30,
                        borderColor: colors.textColor,
                        borderRadius: 5,
                        height: verticalScale(40)
                      }}
                      onPress={() => {
                        this.menu = !this.menu;
                      }}
                    >
                      <Text>CANCEL</Text>
                    </TouchableOpacity>
                  </View>
           
          ) : (
            <View />
          )}
        </View>
        <Toast ref="toast" position={"center"} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    backgroundColor: "white"
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5
  },
  buttonView: {
    width: "80%",
    height: 60,
    marginTop: 10,
    alignItems: "center",
    justifyContent: "center",
    borderColor: "black",
    borderWidth: 1
  },
  textView:{
    color:colors.textColor,
    fontFamily:Fonts.ubuntu
  },
  label: {
    color: "black",
    fontSize: 12
  },
  input: {
    fontSize: 16,
    color: "black"
  }
});
