import React, { Component } from 'react';
import { StatusBar, StyleSheet, View } from 'react-native';
import I18n from 'react-native-i18n';
import { Appbar, Provider } from 'react-native-paper';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { Color } from '../../config/Color';
import { IlinkEmitter } from "../../utils/events";
import OutlineTextInput from '../../components/OutlineTextInput';
import CustomButton from '../../components/CustomButton';
import { ScrollView } from 'react-native-gesture-handler';
const route = require('../../route.json');
let slugify = require('slugify');

export default class PaiementFacture extends Component {

     constructor(props) {
          super(props);
          IlinkEmitter.on("langueChange", this.updateLangue.bind(this));
          this.state = {
               title: this.props.navigation.state.params.title,
               type: this.props.navigation.state.params.type,
          }
          console.log("Paiement facture props", this.props);

     }

     updateLangue() {
          this.props.navigation.setParams({ name: I18n.t('WALLET') })
          this.forceUpdate();
     }

     static navigationOptions = ({ navigation }) => ({
          header: null,
          headerMode: 'none',
          headerTitle: null,
          activeColor: '#f0edf6',
          inactiveColor: '#3e2465',
          barStyle: { backgroundColor: '#694fad' },
          drawerLabel: I18n.t('CREDIT_MANAGE'),
          drawerIcon: ({ tintColor }) => (
               <Icon
                    name={'credit-card'}
                    size={24}
               />)
     });

     renderLabel = () => {
          const { type } = this.state;

          switch (type) {
               case 'PAIEMENT_ECOLE':
                    return I18n.t('IDENTIFIANT_ETUDIANT')
               case 'PAIEMENT_EAU_ELECTRICITE':
                    return I18n.t('NUMERO_ABONNE')
               case 'PAIEMENT_CREDIT_TELEPHONE':
                    return I18n.t('PHONE_NUMBER')
               case 'PAIEMENT_ABONNEMENT_TV':
                    return I18n.t('NUMERO_ABONNE')

               default:
                    break;
          }
     }

     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={this.state.title}
                              />
                         </Appbar.Header>

                         <View style={styles.container}>

                              <ScrollView style={{ padding: 20 }}>

                                   <View style={{ marginTop: 10, marginRight: 20, marginLeft: 20 }}>
                                        <OutlineTextInput
                                             borderBottomColor={'black'}
                                             keyboardType="numeric"
                                             label={this.renderLabel()}
                                             style={{ marginTop: 10 }}
                                             placeholder={this.renderLabel()}
                                        />
                                   </View>

                                   <View style={{ marginTop: 10, marginRight: 20, marginLeft: 20, marginBottom: 10 }}>
                                        <OutlineTextInput
                                             borderBottomColor={'black'}
                                             keyboardType="numeric"
                                             label={I18n.t('AMOUNT')}
                                             style={{ marginTop: 10 }}
                                             placeholder={I18n.t('AMOUNT_LABEL_DESCRIPTION')}
                                        />
                                   </View>


                                   <View style={{ margin: 10 }}>
                                        <CustomButton outline onPress={() => { }}>
                                             {I18n.t('VALIDATE')}
                                        </CustomButton>
                                   </View>

                              </ScrollView>


                         </View>

                    </View>
               </Provider>
          );
     }
}


const styles = StyleSheet.create({
     container: {
          flex: 1,
          backgroundColor: Color.containerBackgroundColor
     },
});