import React, {Component} from 'react';
import {
  Platform,
  StyleSheet,
  View,
  TouchableOpacity,
  Alert,
  SafeAreaView,
  Text,
} from 'react-native';
import {observable, action, transaction} from 'mobx';
import {observer, inject} from 'mobx-react';
import Loading from '../../components/Loading';
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 {colors} from '../../assets/styles/colors-theme';
import {
  CreditCardInput,
  LiteCreditCardInput,
} from 'react-native-credit-card-input';
//component

// function
import {width, height} from '../../services/screen';
Icon.loadFont();
//const log = new Log()
@inject('appStore')
@observer
export default class CreditCard extends Component {
  @observable
  menu = false;
  @observable
  addCard = false;
  cardData = null;

  static navigationOptions = {
    drawerLabel: 'Account',
  };

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

  addCardAction() {
    var BreakException = {};
    if (this.cardData != null) {
      if (this.cardData.valid) {
        var expiry = this.cardData.values.expiry.replace('/', '');
        let data = {
          number: this.cardData.values.number.replace(/\s/g, ''),
          expMonth: parseInt(expiry.substring(0, 2)),
          expYear: parseInt(expiry.substring(2, 4)) + 2000,
          cvc: this.cardData.values.cvc,
        };

        console.log(data);
        // 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}>
          <View
            style={{
              height: Platform.OS === 'ios' ? 50 : 80,
              marginTop: Platform.OS === 'ios' ? 0 : 20,
              width: width,
              justifyContent: 'center',
              alignItems: 'center',
             // backgroundColor: colors.mainColor,
            }}>
            <Text style={{color: colors.mainColor, fontSize: 18}}>
              {this.store.text.creditCardSettings}
            </Text>
          </View>
          <Loading loading={this.store.loading} />

          <View style={{marginTop: 20, width: width}}>
            <TouchableOpacity
              style={{
                height: 60,
                width: 60,
                justifyContent: 'center',
                alignItems: 'center',
              }}
              onPress={() => {
                this.props.navigation.goBack();
              }}>
              <Icon name="ios-arrow-back" color={colors.mainColor} size={40} />
            </TouchableOpacity>
          </View>

          {this.store.creditCardinfo == null ? (
            <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={45} color={colors.mainColor} />
                </View>
                <TouchableOpacity
                  style={{
                    width: '75%',
                    height: 40,
                    alignItems: 'center',
                    borderWidth: 2,
                    borderColor: colors.mainColor,
                    borderRadius: 5,
                    justifyContent: 'center',
                  }}
                  onPress={() => {
                    this.addCard = true;
                    // log.firebaseLog('press_add_creditCard_button',{})
                  }}>
                  <Text
                    style={{
                      fontSize: 15,
                      color: colors.mainColor,
                      fontWeight: 'bold',
                    }}>
                    {this.store.text.addCreditCard}
                  </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.mainColor,
                        borderRadius: 5,
                        height: 40,
                      }}
                      onPress={() => {
                        this.addCardAction();
                      }}>
                      <Text style={styles.textView}>{this.store.text.add}</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                      style={{
                        width: '45%',
                        alignItems: 'center',
                        justifyContent: 'center',
                        borderWidth: 2,
                        borderColor: colors.mainColor,
                        borderRadius: 5,
                        height: 40,
                      }}
                      onPress={() => {
                        this.addCard = false;
                        this.cardData = null;
                        // log.firebaseLog('press_cancel_button_on_creditCard_progress',{})
                      }}>
                      <Text style={styles.textView}>
                        {this.store.text.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={45} color={colors.mainColor} />
              </View>

              <View
                style={{
                  width: '75%',
                  height: 40,
                  alignItems: 'center',
                  flexDirection: 'row',
                  borderWidth: 2,
                  borderColor: colors.mainColor,
                  borderRadius: 5,
                  justifyContent: 'space-between',
                }}
                onPress={() => {
                  this.addCard = true;
                }}>
                <Text
                  style={{
                    fontSize: 15,
                    paddingLeft: 20,
                    color: colors.mainColor,
                    fontWeight: 'bold',
                  }}>
                  {this.store.creditCardinfo.number}
                </Text>
                <TouchableOpacity
                  style={{justifyContent: 'center', alignItems: 'center'}}
                  onPress={() => (this.menu = !this.menu)}>
                  <Icon2
                    name="dots-vertical"
                    size={30}
                    color={colors.mainColor}
                    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.mainColor,
                  borderRadius: 5,
                  height: 40,
                }}
                onPress={() => {
                  this.removeCard();
                  this.menu = !this.menu;
                  //   log.firebaseLog('press_remove_card_button',{})
                }}>
                <Text style={{color: colors.mainColor}}>
                  {this.store.text.removeCreditCard}
                </Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={{
                  width: '40%',
                  alignItems: 'center',
                  justifyContent: 'center',
                  borderWidth: 2,
                  marginRight: 30,
                  borderColor: colors.mainColor,
                  borderRadius: 5,
                  height: 40,
                }}
                onPress={() => {
                  this.menu = !this.menu;
                }}>
                <Text style={{color: colors.mainColor}}>
                  {this.store.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.mainColor,
  },
  label: {
    color: 'black',
    fontSize: 12,
  },
  input: {
    fontSize: 16,
    color: 'black',
  },
});
