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 { listAllMembers } from './../../webservice/MemberGeolocatedApi'
import { listFreeCodesSuperViseur } from './../../webservice/NetworkApi'
import { readUser, listDemandAdhesion, acceptDemandAdhesion, deleteUser } from "../../webservice/AuthApi";
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import Icons from 'react-native-vector-icons/Ionicons'
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 { IndicatorViewPager, PagerTabIndicator } from 'react-native-best-viewpager';
import Tag from '../../components/Tag';

import { Card, CardTitle, CardContent, CardAction, CardButton, CardImage } from 'react-native-material-cards'
let moment = require('moment-timezone');
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";
import DeviceInfo from 'react-native-device-info'
import { Color } from '../../config/Color'
import { Typography, FontWeight } from '../../config/typography'
import { thousandsSeparators } from '../../utils/UtilsFunction'
const thousands = require('thousands');

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))
          this.currentLocale = DeviceInfo.getDeviceLocale().includes("fr") ? "fr" : "en-gb";
          moment.locale(this.currentLocale);

     }
     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={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                                   <View style={{ flex: 1, alignItems: 'flex-start' }}>
                                        <View style={{
                                             flexDirection: 'row',
                                             backgroundColor: theme.primary,
                                             justifyContent: 'center',
                                             marginRight: 10,
                                             width: 160,
                                             marginTop: 5,
                                             alignItems: 'center',
                                             borderRadius: 10,
                                        }}>
                                             <Icon name={"phone"} color={"white"} size={24}
                                                  style={styles.callIcon} />
                                             <Text style={styles.phone}>{item.phone}</Text>
                                        </View>
                                   </View>

                                   <View style={{
                                        width: 1,
                                        backgroundColor: Color.borderColor,
                                        marginTop: -20
                                   }} />

                                   <View style={{ flex: 1, flexDirection: 'column', marginTop: -15 }}>

                                        <View
                                             style={{
                                                  flexDirection: 'row',
                                                  alignItems: 'center',
                                                  marginTop: -10
                                             }}>
                                             <View
                                                  style={[
                                                       styles.circlePoint,
                                                       { backgroundColor: Color.whiteColor },
                                                  ]}>
                                                  <Icons name='md-wallet'
                                                       size={32}
                                                       color={Color.primaryColor}
                                                  />
                                             </View>
                                             <View>
                                                  <Text style={[Typography.title3, Color.primaryColor], { marginBottom: 1 }}>
                                                       {I18n.t('PRINCIPAL_ACCOUNT_TITLE')}
                                                  </Text>
                                                  <Text style={[Typography.body2]}>{item.balance_princ === null ? 0 : thousands(item.balance_princ, ' ')}</Text>
                                             </View>
                                        </View>

                                        <View
                                             style={{
                                                  flexDirection: 'row',
                                                  alignItems: 'center',
                                                  marginTop: -10
                                             }}>
                                             <View
                                                  style={[
                                                       styles.circlePoint,
                                                       { backgroundColor: Color.whiteColor },
                                                  ]}>
                                                  <Icons name='md-cash'
                                                       size={32}
                                                       color={Color.primaryColor}
                                                  />
                                             </View>
                                             <View>
                                                  <Text style={[Typography.title3, Color.primaryColor], { marginBottom: 1 }}>
                                                       {I18n.t('COMMISSION_ACCOUNT_TITLE')}
                                                  </Text>
                                                  <Text style={Typography.body2}>{item.balance_com === null ? 0 : thousands(item.balance_com, ' ')}</Text>
                                             </View>
                                        </View>
                                   </View>
                              </View>

                              {/*                               <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({
     circlePoint: {
          width: 50,
          height: 50,
          marginRight: 5,
          alignItems: 'center',
          justifyContent: 'center',
     },
     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
     },
})