import React,{Component} from 'react'
import {StyleSheet,View,PixelRatio,Text,RefreshControl,
    FlatList,ProgressBarAndroid,ProgressViewIOS,Alert,StatusBar} from 'react-native'
import BaseScreen from './../BaseScreen'
import {responsiveHeight,responsiveWidth} from 'react-native-responsive-dimensions'
import {PagerTabIndicator, IndicatorViewPager, PagerTitleIndicator, PagerDotIndicator} from 'rn-viewpager';
import {listAllMembers} from './../../webservice/MemberGeolocatedApi'
import {listFreeCodesSuperViseur} from './../../webservice/NetworkApi'
import {readUser, listDemandAdhesion, acceptDemandAdhesion, deleteUser} from "../../webservice/AuthApi";
import Icon from 'react-native-vector-icons/MaterialIcons'
import Swipeout from 'react-native-swipeout'
import {theme} from "../BaseScreen";
require("./../../utils/Translations");
import I18n from 'react-native-i18n'
const route=require('./../../route.json')
import LottieView from 'lottie-react-native'; // if you have "esModuleInterop": true

import { Card, CardTitle, CardContent, CardAction, CardButton, CardImage } from 'react-native-material-cards'
let moment=require('moment-timezone');
import 'moment/locale/fr'
import 'moment/locale/fr'
import 'moment/locale/es-us'
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 {Header} from "react-native-elements";
import {IlinkEmitter} from "../../utils/events";


var users=null;
var chart=null;

export default class SuperViseurGroupeHome extends BaseScreen{
    static tabsStyle: { 
        tabBarButtonColor: '#ff0000'
    }
    static navigatorStyle = {
        tabBarHidden: false,
        topTabTextColor: '#ffffff',
        topTabsHeight: 70,
        topTabTextFontFamily: 'BioRhyme-Bold',
        selectedTopTabTextColor: '#ff505c',

        statusBarColor:theme.primaryDark,
        navBarBackgroundColor:theme.primary,
        navBarTextColor:'white',
        navBarButtonColor:'white',
            // Icons
        topTabIconColor: '#ffffff',
        selectedTopTabIconColor: '#ff505c',

        // Tab indicator
        selectedTopTabIndicatorHeight: PixelRatio.get() * 2,
        selectedTopTabIndicatorColor: '#ff505c',
    };
    static options(passProps){
        return {
            topBar:{
                rightButtons:[]
            }
        }

    }
    static navigationOptions =({navigation})=> {
      return {
          title:I18n.t("GROUP_MANAGE"),
          drawerLabel: navigation.getParam("name", I18n.t('GROUP_MANAGE')),
          drawerIcon: ({tintColor}) => (
              <Icon
                  name={'people'}
                  size={24}
              />
          ),
      }};
    constructor(props){
        super(props,true);
        this.state=SuperViseurGroupeHome.initState();

        readUser().then((user)=>{
            this.setState({user:user})
            listFreeCodesSuperViseur(user.code_membre).then((codes)=>{
                console.log("codes",codes)
                    if(codes.success!=undefined){
                        this.setState({freeCodes:codes.networks})
                    }
            })
        });
        listAllMembers().then((data)=>{
            console.log(data);
            if(data!==null){
                this.setState({listmembers:data,isLoading:false,isRefreshing:false})
            }
        });
        this._populateIcons().then((values)=>{
            this.setState({usersicon:values[0],charticon:values[1]})
        });
        listDemandAdhesion().then((items)=>{
            console.log(items)
            let filtereds=[];
            items.forEach((item)=>{
                let b=false;
                filtereds.forEach((f)=>{
                    if(f.code_membre===item.code_membre){
                        b=true;
                    }
                })
                if(!b)filtereds.push(item)

            })
            console.log('filtered',filtereds)
            if(items!==undefined){
                this.setState({demands:filtereds,isLoadingDemand:false})
        }
        })
        IlinkEmitter.on("langueChange", this.updateLangue.bind(this))

    }
    updateLangue(){
        this.props.navigation.setParams({name:I18n.t('GROUP_MANAGE')})
        this.forceUpdate()
    }
    static initState(){
        return ({
            enabledListMembers:true,
            listmembers:[],
            usersicon:null,
            isLoadingDemand:true,
            charticon:null,
            isRefreshing:false,
            user:{},
            freeCodes:[],
            isLoading:true,
        })
    }
    render() {
        return (
            <View style={{flex:1,marginBottom:10}}>
               <StatusBar
                    backgroundColor="#00000030"
                    barStyle="light-content"
                    translucent={false}
                /> 
            <IndicatorViewPager style={{flex:1}}
            indicator={this.state.user.category==='hyper'?this._renderTabIndicatorAdmin():this._renderTabIndicator()}
            >
                {this.state.isLoading?this._renderLoadingItems():this._renderListMembers()}
                {this.state.isLoadingDemand?this._renderLoadingItems():this.state.user.category==='hyper'?
                    this._renderListDemandAdhesion():this._renderListCodeUnused()}
                </IndicatorViewPager>
            </View>
                );

    }

    _populateIcons = function () {
        return new Promise(function (resolve, reject) {
            Promise.all(
                [
                    Icon.getImageSource('users', 30),
                    Icon.getImageSource('chart-pie', 30),
                ]
            ).then((values) => {
                users = values[0];
                chart=values[0];
                resolve(values);
            }).catch((error) => {
                console.log(error);
                reject(error);
            }).done();
        });
    };

    _renderTabIndicatorAdmin() {

        let tabs = [{
            text: I18n.t('MEMBER_LIST'),
            iconSource:this.state.usersicon
        },{
            text:I18n.t('MEMBERSHIP_REQUEST'),
            iconSource:this.state.charticon
        }]
        return <PagerTabIndicator
            style={{
            height:responsiveHeight(8)
        }}
            tabs={tabs} />;
    }

    _renderTabIndicator() {

        let tabs = [{
            text: I18n.t('MEMBER_LIST'),
            iconSource:this.state.usersicon
        }
        ]
        return <PagerTabIndicator
            style={{
                height:responsiveHeight(8)
            }}
            tabs={tabs} />;
    }

    _renderListMembers() {
        return (<View>

            <FlatList
            style={{flex: 1, backgroundColor: '#EEE'}}
            data={this.state.listmembers instanceof Array?this.state.listmembers:(this.state.listmembers.datas?this.state.listmembers.datas:[])}
            ListEmptyComponent={()=>{return (
            <View style={{flex:1}}>  
              <View style={{justifyContent:"center",alignItems:'center',marginTop:100}}>
            <LottieView
            style={styles.lottie}
            source={require("./../../datas/json/629-empty-box.json")}
            autoPlay
            loop
          />
          <Text style={styles.text}>{I18n.t('NO_MEMBERS')}</Text>
          </View>
            </View>)}

            }
            refreshControl={
                <RefreshControl
                    refreshing={this.state.isRefreshing}
                    colors={[theme.primary,theme.purpleLight,theme.reddeconnect,theme.accentLight]}
                    onRefresh={()=>{
                        this.setState({isRefreshing:true})
                        listAllMembers().then((data)=>{
                            console.log("from refresh",data)
                            if(data!==null && data.datas){
                                this.setState({listmembers:data,isLoading:false,isRefreshing:false})
                            }
                        });
                    }}
                />
            }
            renderItem={({item}) =>
                this.renderMembers(item)
            }

        />
        </View>)

    }

_renderLoadingItems() {
    return (<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
        <ProgressBarAndroid/>
    </View>)


}

   
renderMembers(item) {
    var re= moment.tz(item.created_at,'Etc/GMT+0').format();
   re=moment(re).fromNow();
   if(true){
       return (
<Card >
<CardTitle 
title={item.lastname}
subtitle={item.adresse}
/>
<CardContent>
    <View Style={{flex:1,flexDirection:'row'}}>
<View Style={{flex:1}}/>

<View style={{flexDirection:'row',
    backgroundColor:theme.primary,
marginRight:10,
width:150,
justifyContent:'center',
alignItems:'center',
borderRadius:10,
}}><Icon name={"phone"}  color={"white"} size={24}
  style={styles.callIcon}/>
<Text style={styles.phone}>{item.phone}</Text>
</View>

</View>
</CardContent>
<CardAction 
separator={true} 
inColumn={false}>
<CardButton
 onPress={() => {
    Alert.alert(
        I18n.t("TITLE_SUPPRESS_CONFIRM"),
        I18n.t("TEXT_SUPPRESS_CONFIRM"),
        [
            {text: I18n.t('NO'), onPress: () =>{}},
            {text:I18n.t('YES'), onPress: () => {
                deleteUser(item).then(()=>{
                    this.setState({isLoading:true})
                    listAllMembers().then((data)=>{
                        console.log(data)
                        if(data!==null){
                            this.setState({listmembers:data,isLoading:false,isRefreshing:false})
                        }
                    });
                })
            },
                style: 'cancel'},
        ],
    )
 }}
 title={I18n.t('DELETE_GEOLOCATED_USER')}
 color="crimson"
/>
</CardAction>
</Card>)
   }else
   return(<View>
       <Swipeout left={[
           {
               text: I18n.t('DELETE_GEOLOCATED_USER'),
               type: 'delete',
               autoClose: true,
               onPress: function () {
                   Alert.alert(
                       'Confirmations de suppression',
                       'Voulez vous vraiment supprimer cette utilisateur ?',
                       [
                           {text: 'Non', onPress: () =>{}},
                           {text: 'Oui', onPress: () => {
                               deleteUser(item).then(()=>{
                                   this.setState({isLoading:true})
                                   listAllMembers().then((data)=>{
                                       if(data!==null){
                                           this.setState({listmembers:data,isLoading:false})
                                       }
                                   });
                               })
                           },
                               style: 'cancel'},
                       ],
                   )
               }
           }

       ]}
                 buttonWidth={responsiveWidth(40)}
       >
       <View
       style={{
           height:200,
           marginBottom:10,
           flex:1,
           backgroundColor:'white'
       }}
   >
       <Text style={styles.name}>{item.firstname}</Text>

       <Text style={styles.surname}>{item.lastname}</Text>
       <View style={{flexDirection:'row',

           marginRight:20,
           justifyContent:'flex-end',
           alignItems:'center'
       }}><Icon name={"phone"}  color={theme.primary} size={24}
             style={styles.callIcon}/>
       <Text style={styles.phone}>{item.phone}</Text>
       </View>
       <View style={{flexDirection:'row',
           marginLeft:20,
           justifyContent:'flex-start',
           alignItems:'center'
       }}>
           <Icon name={"folder"}  color={theme.primary} size={24}
                 style={styles.balanceIcon}/>
           <Text style={styles.balanceMember}>{item.balance}</Text>
       </View>

   </View>
       </Swipeout>
       </View>)
}
    /* <View style={{flexDirection:'row',

                       marginRight:40,
                       justifyContent:'flex-end',
                       alignItems:'center'
                   }}>
                 <Icon name={"clock"}  color={theme.accentLight} size={24}
                       style={styles.callIcon}/>
                 <Text style={styles.fromNow}>{re}</Text>
             </View>*/


    _renderListDemandAdhesion() {
        if(this.state.user.category==='hyper'){
            if(this.state.demands.length>0) {
                return (<View style={{backgroundColor: '#EEEEEE', flex: 1}}>
                    <FlatList
                        data={this.state.demands}
                        renderItem={({item}) => this._renderAddhesionItem(item)}
                        refreshControl={
                            <RefreshControl
                                refreshing={this.state.isRefreshing}
                                colors={[theme.primary,theme.purpleLight,theme.reddeconnect,theme.accentLight]}
                                onRefresh={()=>{
                                    this.setState({isRefreshing:true})
                                    listAllMembers().then((data)=>{
                                        console.log("from refresh",data)
                                        if(data!==null && data.datas){
                                            this.setState({listmembers:data,isLoading:false,isRefreshing:false})
                                        }
                                    });
                                }}
                            />
                        }
                        ListEmptyComponent={()=>{return (
                            <View style={{flex:1}}>  
                              <View style={{justifyContent:"center",alignItems:'center',marginTop:100}}>
                            <LottieView
                            style={styles.lottie}
                            source={require("./../../datas/json/629-empty-box.json")}
                            autoPlay
                            loop
                          />
                          <Text style={styles.text}>{I18n.t('NO_MEMBERS')}</Text>
                          </View>
                            </View>)}}
                    />
                </View>)
            }else{
                return (<View style={{backgroundColor: 'white', flex: 1,justifyContent:'center',alignItems:'center'}}>
                    <Text>{I18n.t('NO_DEMAND_ADHESION')}</Text>
                </View>)

            }
        }
    }

    _renderLoadingDemandItems() {
        if(this.state.freeCodes.length>0) {
            return (<View style={{backgroundColor: '#EEEEEE', flex: 1}}>
                <FlatList
                    data={this.state.freeCodes}
                    renderItem={({item}) => this._renderAddhesionItem(item)}
                />
            </View>)
        }else{
            return (<View style={{backgroundColor: 'white', flex: 1,justifyContent:'center',alignItems:'center'}}>
                <Text>{I18n.t('NO_GEO_POINT_CODE')}</Text>
            </View>)

        }
    }

    _renderAddhesionItem(item) {
        return (<Card style={{flex:1,height:responsiveHeight(30),backgroundColor:"white",
            marginBottom:10}}>
            <CardContent style={{height:responsiveHeight(20), flex:1,justifyContent:'space-evenly'}}>
                <View>
                <Text style={{marginLeft:10}}><Text style={{color:"black", }}>{I18n.t('NAME')} :</Text> {item.lastname}</Text>
                <Text style={{marginLeft:10}}><Text style={{color:"black", }}>{I18n.t('PHONE_NUMBER')} :</Text> {item.phone}</Text>
                <Text style={{marginLeft:10}}><Text style={{color:"black", }}>{I18n.t('EMAIL')} :</Text> {item.email}</Text>
                <Text style={{marginLeft:10}}><Text style={{color:"black", }}>{I18n.t('NETWORK')} :</Text> {item.network}</Text>
            </View>
            </CardContent>
            <CardAction 
                separator={true} 
                inColumn={false}>
            <CardButton
               title={I18n.t('ACTIVE_USER')}
               onPress={()=>{
                   acceptDemandAdhesion(item).then((data)=>{
                       Alert.alert(I18n.t('ACTIVATE_ACCOUNT'),I18n.t('THE_ACCOUNT')+' '+item.lastname+" "+I18n.t('ACTIVATED'),[{
                           text:"Ok"
                       }])
                       let datas=this.state.demands
                       datas.splice( datas.indexOf(item), 1 );
                       this.setState({demands:datas})
                   })

               }}
               color={"green"}
           />
            <CardButton
                    title={I18n.t('DELETE_GEOLOCATED_USER')}
                    color={"red"}
                    onPress={()=>{}}
                />
</CardAction>
          
        </Card>)
    }

    _renderListCodeUnused() {
        if(this.state.freeCodes.length>0) {
            return (<View style={{backgroundColor: '#EEEEEE', flex: 1}}>
                <FlatList
                    data={this.state.freeCodes}
                    renderItem={({item}) => this._renderFreeCodeItem(item)}
                />
            </View>)
        }else{
            return (<View style={{backgroundColor: 'white', flex: 1,justifyContent:'center',alignItems:'center'}}>
                <Text>{I18n.t('NO_GEO_POINT_CODE')}</Text>
            </View>)

        }
    }

    _renderFreeCodeItem(item) {
        console.log(item)
        return (<View style={{flex:1,height:responsiveHeight(30),backgroundColor:"white",
            marginBottom:10}}>
            <View style={{height:responsiveHeight(20), flex:1,justifyContent:'space-evenly'}}>
                <Text style={{marginLeft:10}}><Text style={{color:"black", }}>Contact :</Text> {item.phone}</Text>
                <Text style={{marginLeft:10}}><Text style={{color:"black", }}>code Membre :</Text> {item.code_membre}</Text>
                <Text style={{marginLeft:10}}><Text style={{color:"black", }}>code Validation :</Text> {item.validation_code}</Text>
            </View>
         </View>)

    }
}
const styles=StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'white'
    },
    fromNow:{
      color:theme.accentLight
    },
    callIcon:{
      marginRight:5,
    },
    phone:{
      textAlign:'center',
        color:"white"
    },
    balanceMember:{
      marginLeft:7,
      fontSize:18,
      fontWeight:"bold",
        color:theme.primary,
    },
    balanceIcon:{
    },
    name:{
        color:'black',
        fontSize:20,
        margin:20,
        fontWeight:'bold'
    },
    surname:{
        fontSize:17,
        marginLeft:20,
    }, 
     text:{
        fontSize:17,
        fontWeight:'bold',
    },
    lottie: {
        width: 248,
        height: 248
      },
})