import React, { Component } from 'react'
import { StyleSheet, Text, View, StatusBar, Platform, ProgressBarAndroid } from 'react-native'
import BaseScreen from './../BaseScreen'
import I18n from "react-native-i18n";
import Icon from 'react-native-vector-icons/MaterialIcons'
import LottieView from 'lottie-react-native'; // if you have "esModuleInterop": true
import { Header } from "react-native-elements";
import { bindActionCreators } from 'redux';
import { getNotificationAction, getNotificationReset } from '../../webservice/OnesignalApi';
import { connect } from 'react-redux';
const theme = require('./../../utils/theme.json')
class Notifications extends BaseScreen {
     static navigatorStyle = {
          navBarBackgroundColor: theme.primaryDark,
          navBarTextColor: 'white',
          statusBarBackgroundColor: theme.primaryDarkAdvanced,
          navBarButtonColor: 'white',
          statusBarTextColorScheme: 'light',
     };
     static navigationOptions = {
          headerTitle: I18n.t('NOTIFICATIONS'),
          drawerIcon: ({ tintColor }) => (
               <Icon
                    name={'notifications-active'}
                    size={24}
               />
          ),
     };
     constructor(props) {
          super(props);

     }

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

     renderLoader = () => {
          return (
               <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                    {Platform.OS === 'android'
                         ?
                         (
                              <>
                                   <ProgressBarAndroid />
                                   <Text>{I18n.t('LOADING_DOTS')}</Text>

                              </>
                         ) :
                         <>
                              <ActivityIndicator size="large" color={'#ccc'} />
                              <Text>{I18n.t('LOADING_DOTS')}</Text>
                         </>
                    }
               </View>
          )
     }

     componentDidMount() {

          readUser().then((user) => {
               if (user) {
                    if (user !== undefined) {
                         if (user.phone !== undefined) {
                              this.props.getNotificationAction(user.user_code);
                         }
                    }
               }
          });

     }
     render() {
          return (
               <View style={styles.container}>
                    <StatusBar
                         backgroundColor="#00000030"
                         barStyle="light-content"
                         translucent={false}
                    />
                    <View style={{ justifyContent: "center", alignItems: 'center', marginTop: 100 }}>

                         <LottieView
                              style={styles.lottie}
                              source={require("./../../datas/json/781-no-notifications.json")}
                              autoPlay
                              loop
                         />
                         <Text style={styles.text}>{I18n.t('NO_NOTIFICATION')}</Text>
                    </View>
               </View>)
     }
}

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

const mapDispatchToProps = dispatch => bindActionCreators({
     getNotificationAction: getNotificationAction,
     getNotificationReset: getNotificationReset
}, dispatch);

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

const styles = StyleSheet.create({
     container: {
          flex: 1,
          backgroundColor: 'white'
     },
     text: {
          fontSize: 17,
          fontWeight: 'bold',
     },
     lottie: {
          width: 248,
          height: 248
     },
})