import React, { Component } from 'react';
import { FlatList, Image, StatusBar, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';
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 { Typography } from '../../config/typography';
import * as Utils from '../../utils/DeviceUtils';
import { IlinkEmitter } from "../../utils/events";
const route = require('../../route.json');
let slugify = require('slugify');

export default class OperateurOptionSelect extends Component {

     constructor(props) {
          super(props);
          IlinkEmitter.on("langueChange", this.updateLangue.bind(this));
          console.log("OPERATEUR OPTION PROPS", this.props);
          this.state = {
               options: this.props.navigation.state.params.optionSelect.options,
               title: this.props.navigation.state.params.optionSelect.title,
               subTitle: this.props.navigation.state.params.optionSelect.subTitle,
          }

     }

     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}
               />)
     });

     redirectToRoute = (item) => {
          this.props.navigation.push(item.screen, {
               title: item.title,
               type: item.type
          });

     }

     renderItem = (item, index) => {

          return (
               <TouchableOpacity
                    key={index}
                    style={[styles.paymentItem, { borderBottomColor: Color.borderColor }]}
                    onPress={() => {

                    }}>

                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                         <View style={styles.iconContent}>
                              <Image style={{ width: 48, height: 48 }} source={{ uri: item.icon }} />
                         </View>
                         <View>
                              <Text style={Typography.body1}>{item.title}</Text>
                              <Text style={Typography.footnote}>{item.title}</Text>
                         </View>
                    </View>

               </TouchableOpacity>
          )
     }

     renderList = () => {

          const { options } = this.state;

          return (
               <ScrollView style={{ flex: 1, padding: 20 }}>
                    {
                         options.map((item, index) => (
                              this.renderItem(item, index)
                         ))
                    }
               </ScrollView>
          );
     }

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

                         <View style={styles.container}>

                              <FlatList
                                   contentContainerStyle={{
                                        paddingHorizontal: 20,
                                        paddingBottom: 10,
                                   }}
                                   data={this.state.options}
                                   keyExtractor={(item, index) => index.toString()}
                                   renderItem={({ item, index }) => (
                                        <TouchableOpacity
                                             style={[styles.item, { borderBottomColor: Color.borderColor }]}
                                             onPress={() => {
                                                  this.redirectToRoute(item);
                                             }}>
                                             <View style={{ flexDirection: 'row' }}>
                                                  <Image style={{ width: 30, height: 30 }} source={{ uri: item.icon }} />

                                                  <Text style={[Typography.body1]}>{item.title}</Text>
                                             </View>
                                             <Icon
                                                  name="chevron-right"
                                                  size={20}
                                                  color={Color.primaryColor}
                                                  enableRTL={true}
                                             />
                                        </TouchableOpacity>
                                   )}
                              />

                         </View>

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


const styles = StyleSheet.create({
     container: {
          flex: 1,
     },
     paymentItem: {
          flexDirection: "row",
          alignItems: "center",
          justifyContent: "space-between",
          borderBottomWidth: 1,
          paddingVertical: 5,
          width: "100%",
          marginBottom: 15
     },
     iconContent: {
          width: 60,
          marginRight: 10,
          alignItems: "center"
     },
     item: {
          paddingVertical: 15,
          borderBottomWidth: 1,
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "center"
     },
     /*      item: {
               paddingVertical: 15,
               borderBottomWidth: 1,
               flexDirection: "row",
               justifyContent: "space-between",
               alignItems: "center"
          }, */
     lottie: {
          width: 540,
          height: 240
     },
     checkDefault: {
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "center",
          borderBottomWidth: 1,
          paddingVertical: 10,
          marginTop: 5
     },
     transactionContainer: {
          flexDirection: 'row',
          paddingTop: 10,
     },
     containerTouch: {
          flex: 1,
          flexDirection: 'row',
          alignItems: 'center',
          shadowColor: Color.borderColor,
          borderColor: Color.borderColor,
          borderWidth: 0.5,
          shadowOffset: { width: 1.5, height: 1.5 },
          shadowOpacity: 1.0,
          elevation: 5,
          borderRadius: 10,
          backgroundColor: Color.cardBackgroundColor
     },

     contain: {
          flexDirection: 'row',
          justifyContent: 'space-between',
     },
     imageBanner: {
          marginTop: 15,
          marginLeft: 5,
          width: Utils.scaleWithPixel(30),
          height: Utils.scaleWithPixel(30)
     },
     content: {
          height: Utils.scaleWithPixel(60),
          paddingHorizontal: 10,
          justifyContent: 'space-between',
          alignItems: 'flex-start',
          flex: 1,
     },
     contentTitle: {
          paddingTop: 12,
     }

});