import 'moment/locale/en-au';
import 'moment/locale/en-ca';
import 'moment/locale/en-ie';
import 'moment/locale/en-il';
import 'moment/locale/en-nz';
import 'moment/locale/es-us';
import 'moment/locale/fr';
import React, { Component } from 'react';
import { Alert, Dimensions, ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native';
import { CreditCardInput } from "react-native-credit-card-input";
import I18n from 'react-native-i18n';
import { Appbar, Provider } from 'react-native-paper';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import CustomButton from '../../../components/CustomButton';
import OutlineTextInput from '../../../components/OutlineTextInput';
import { Color } from '../../../config/Color';
import { linkCardReset, linkCardAction } from '../../../webservice/WalletApi';
import { ProgressDialog } from 'react-native-simple-dialogs';
import { readUser } from '../../../webservice/AuthApi';
//import Dialog, { DialogContent, DialogTitle, DialogFooter, DialogButton } from 'react-native-popup-dialog';
let moment = require('moment-timezone');

const CONTAINER_WIDTH = Dimensions.get("window").width;

class LinkCard extends Component {

     static navigatorStyle = {
          navBarBackgroundColor: Color.accentLightColor,
          statusBarColor: Color.accentColor,
          navBarTextColor: '#FFFFFF',
          navBarButtonColor: '#FFFFFF',
     };

     static navigationOptions = ({ navigation }) => {
          return {
               header: null,
               headerMode: 'none',
               headerTitle: null,
               activeColor: '#f0edf6',
               inactiveColor: '#3e2465',
          };
     }

     constructor(props) {
          super(props);
          this.state = {
               numCarte: 0,
               cvv: 0,
               expiration_date: '',
               creditCardInput: {},
               displayCardError: false,
               isSubmitClick: false,
               user: null
          };
          this.props.linkCardReset();
     }

     componentDidMount() {

          readUser().then((user) => {
               if (user) {
                    if (user !== undefined) {
                         this.setState({ user });
                    }
               }
          });

     }

     renderLoader = () => {
          return (
               <ProgressDialog
                    visible={this.props.loading}
                    title={I18n.t('LOADING')}
                    message={I18n.t('LOADING_INFO')}
               />
          )
     }

     renderDialogResponse = () => {
          const { result, error } = this.props;

          if (error !== null) {
               if (typeof error.data !== 'undefined') {
                    Alert.alert(
                         I18n.t("ERROR_LABLE"),
                         error.data.error,
                         [
                              {
                                   text: I18n.t("OK"), onPress: () => {
                                        this.props.linkCardReset();
                                   }
                              }
                         ],
                         { cancelable: false }
                    )
               }
          }

          if (result !== null) {
               if (result.response !== null) {
                    Alert.alert(
                         I18n.t("SUCCESS"),
                         result.response,
                         [
                              {
                                   text: I18n.t("OK"), onPress: () => {
                                        this.props.navigation.pop();
                                        this.props.linkCardReset();
                                   }
                              }

                         ],
                         { cancelable: false }
                    )
               }
          }
     }

     onCreditCardChange = (form) => {
          this.setState({
               creditCardInput: form
          });
     }

     isCreditCardValid = () => {
          const { creditCardInput } = this.state;
          const errorMessage = [];

          if (typeof creditCardInput.status !== 'undefined') {

               if (creditCardInput.status.cvc === 'incomplete')
                    errorMessage.push(I18n.t('CVC_CARD_ERROR'));
               if (creditCardInput.status.expiry === 'incomplete')
                    errorMessage.push(I18n.t('EXPIRY_CARD_ERROR'));
               if (creditCardInput.status.number === 'incomplete')
                    errorMessage.push(I18n.t('CARD_NUMBER_ERROR'));
          }
          else
               errorMessage.push(I18n.t('THIS_FIELD_IS_REQUIRED'))

          return errorMessage;
     }


     onSubmit = () => {
          const { creditCardInput } = this.state;

          if (creditCardInput.valid) {

               this.setState({
                    numCarte: parseInt((creditCardInput.values.number).replace(/\s/g, '')),
                    expiration_date: creditCardInput.values.expiry,
               }, () => {
                    this.props.linkCardAction({
                         numero_carte: this.state.numCarte,
                         expiration_date: this.state.expiration_date
                    }, this.state.user.id);
               });
          }
          else if (!creditCardInput.valid) {
               this.setState({
                    displayCardError: true
               });
          }

          this.setState({ isSubmitClick: true });
     }

     render() {
          return (
               <Provider>
                    <View style={{ flex: 1 }}>
                         <StatusBar
                              backgroundColor={Color.primaryDarkColor}
                              barStyle="light-content"
                              translucent={false}
                         />

                         <Appbar.Header dark={true} style={{ backgroundColor: Color.primaryColor }}>
                              <Appbar.BackAction
                                   onPress={() => { this.props.navigation.pop() }}
                              />
                              <Appbar.Content
                                   title={I18n.t('LINK_CARD')}
                              />
                         </Appbar.Header>
                         <View style={[styles.container]}>

                              {this.renderLoader()}
                              {this.state.isSubmitClick && this.renderDialogResponse()}
                              <ScrollView style={{ padding: 20 }}>

                                   <View style={{ marginTop: 10 }}>
                                        <CreditCardInput
                                             validColor={this.state.creditCardInput.valid ? 'green' : ''}
                                             invalidColor={!this.state.creditCardInput.valid ? 'red' : ''}
                                             onChange={this.onCreditCardChange}
                                             requiresCVC={false}
                                             labels={{
                                                  number: I18n.t('CARD_NUMBER_LABEL'),
                                                  expiry: I18n.t('CARD_EXPIRY_LABEL')
                                             }} />
                                        {
                                             (this.state.displayCardError) &&
                                             this.isCreditCardValid().map((item) => (
                                                  <Text style={{ color: 'red', marginLeft: 15 }}>{item}</Text>
                                             ))
                                        }
                                   </View>

                                   <View style={{ marginTop: 20, marginLeft: 10, marginRight: 10 }}>
                                        <CustomButton loading={false} outline onPress={() => this.onSubmit()}>
                                             {I18n.t('VALIDATE')}
                                        </CustomButton>
                                   </View>
                              </ScrollView>
                         </View>
                    </View>
               </Provider>
          )
     }

}

const mapStateToProps = state => ({
     loading: state.linkCardReduder.loading,
     result: state.linkCardReduder.result,
     error: state.linkCardReduder.error,
});

const mapDispatchToProps = dispatch => bindActionCreators({
     linkCardAction,
     linkCardReset
}, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(LinkCard);

const styles = StyleSheet.create({
     container: {
          flex: 1,
          backgroundColor: Color.containerBackgroundColor
     },
     checkDefault: {
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "center",
          borderBottomWidth: 1,
          paddingVertical: 15,
          marginTop: 10
     },
     contentButtonBottom: {
          borderTopWidth: 1,
          paddingVertical: 10,
          paddingHorizontal: 20,
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "center"
     },
     blockView: {
          paddingVertical: 10,
          borderBottomWidth: 1
     },
     lottie: {
          width: 248,
          height: 248
     },
});