import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  View,
  TouchableOpacity,
  ScrollView,
  Switch,
  SafeAreaView,
} from "react-native";
import { observable, action } from "mobx";
import Text from "react-native-text";
import { observer, inject } from "mobx-react/native";
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
import Icon from "react-native-vector-icons/dist/Ionicons";
import Toast, { DURATION } from "react-native-easy-toast";
import {
  CreditCardInput,
  LiteCreditCardInput
} from "react-native-credit-card-input";

import DrawerNavigationHeader from "../../components/Public/drawerNavigationHeader";
import Loader from "../../components/Public/loader"
import { width, height } from "../../config/screen";
import theme from '../../config/colors'
import {Fonts} from '../../config/fonts'
import Size from "../../config/size";
const size = new Size();

@inject(["userStore"])
@observer
export default class AddCard extends Component {
  constructor(props) {
    super(props);
    this.store = this.props.userStore;
  }

  cardData = null;

  //_onFocus = field => console.log("focusing", field);

  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);
        this.store.postCreditCard(this.props.navigation,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 {
      this.refs.toast.show("please insert card number");
    }
  }

  render() {
    return (
      <SafeAreaView style={{ flex: 1, backgroundColor: theme.mainColor }}>
      <View style={styles.container}>
      <Loader
      loading = {this.store.loading}/>
        <View
          style={{
            width: width,
            height: "10%",
            alignItems: "center",
            justifyContent: "center",
            marginTop: 20,
            flexDirection: "row"
          }}
        >
          <View
            style={{
              width: "30%",
              height: "100%",
              justifyContent: "center",
              paddingLeft: 5
            }}
          >
            <Icon
              name="ios-arrow-back"
              size={size.getSize(50)}
              color="black"
              onPress={() => {
                this.props.navigation.goBack();
              }}
            />
          </View>

          <View
            style={{
              width: "40%",
              height: "100%",
              justifyContent: "center",
              alignItems: "center"
            }}
          >
            <Text style={{ fontSize: 22, fontFamily: Fonts.century, }}>Add a Card</Text>
          </View>

          <View
            style={{
              width: "30%",
              paddingRight: 5,
              height: "100%",
              flexDirection: "row",
              justifyContent: "flex-end",
              alignItems: "center"
            }}
          >
            <Icon
              name="md-add"
              size={size.getSize(50)}
              color="black"
              onPress={() => this.addCardAction()}
            />
          </View>
        </View>
        <LiteCreditCardInput
          autoFocus
          requiresName
          requiresCVC
          labelStyle={styles.label}
          inputStyle={styles.input}
          validColor={"black"}
          invalidColor={"red"}
          placeholderColor={"darkgray"}
          onChange={form => (this.cardData = form)}
        />

        
      </View>
      <Toast ref="toast" />
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#F5FCFF"
  },
  switch: {
    alignSelf: "center",
    marginTop: 20,
    marginBottom: 20
  },

  label: {
    color: "black",
    fontSize: 12
  },
  input: {
    fontSize: 16,
    color: "black"
  }
});