import React, { Component } from 'react';
import { StyleSheet, View, Text, Image, StatusBar, TouchableOpacity, ScrollView, ProgressBarAndroid, Alert } from 'react-native';
let theme = require('./../../utils/theme.json');
import Icon from 'react-native-vector-icons/MaterialIcons';
import { readUser, deleteUser } from './../../webservice/AuthApi';
import { getAgentNetworksList } from './../../webservice/NetworkApi'
import { responsiveHeight, responsiveWidth } from 'react-native-responsive-dimensions';
import MapView, { Marker } from 'react-native-maps';
import * as Utils from '../../utils/DeviceUtils';
import Button from 'apsl-react-native-button';
import { Typography, FontWeight } from '../../config/typography';
import CardView from "react-native-cardview";
import I18n from 'react-native-i18n'
import { Header } from 'react-native-elements'
import { IlinkEmitter } from "../../utils/events";
import { Card, CardTitle, CardContent, CardAction, CardButton, CardImage } from 'react-native-material-cards'
import { Color } from '../../config/Color';
let route = require('../../route.json');

require('./../../utils/Translations')
const height = responsiveHeight(100) - 250;
/*
var Fabric = require('react-native-fabric');
var { Crashlytics } = Fabric;*/
export default class UserAccount extends Component {
     static navigatorStyle = {
          navBarHidden: false,
          navBarBackgroundColor: theme.primaryDark,
          navBarTextColor: 'white',
          navBarButtonColor: 'white',
          drawUnderStatusBar: false,
          statusBarColor: theme.primaryDarkAdvanced,
          statusBarTextColorScheme: 'light',
     };
     static navigationOptions = ({ navigation }) => {
          return {
               headerTitle: I18n.t('USER_ACCOUNT'),
               headerStyle: {
                    backgroundColor: theme.primary,
                    paddingTop: 10
               },
               headerTitleStyle: {
                    color: "white"
               },
               drawerIcon: ({ tintColor }) => (
                    <Icon
                         name={'person'}
                         size={24}
                    />
               ),
          }
     };
     static options(passProps) {
          return {
               topBar: {
                    drawBehind: false,
                    visible: true,
                    animate: true,
                    buttonColor: 'white',
                    background: {
                         color: theme.primaryDark,
                    },
                    rightButtons: []
               },
               backButton: {
                    visible: true,
                    color: "white"
               },
               buttonColor: "white",
               background: {
                    color: theme.primaryDark
               },
               statusBar: {
                    drawBehind: false,
                    visible: true,
               }
          };
     }
     constructor(props) {
          super(props)
          this.state = this.initState();
          IlinkEmitter.on("langueChange", this.updateLangue.bind(this))
          readUser().then((user) => {
               if (user !== null) {
                    this.setState({ user: user })

                    this.updateContent(user)
               }
          })


     }
     updateLangue() {

          this.props.navigation.setParams({ name: I18n.t('USER_ACCOUNT') })
          this.forceUpdate()
     }
     updateContent(user) {
          getAgentNetworksList(user.agentId).then((networks) => {
               if (networks['success'] !== undefined) {
                    this.setState({ mynetworks: networks.networks })
               }

          });
          this.setState({ user: user });
     }

     initState() {
          return {
               user: {},
               mynetworks: []
          }


     }

     render() {

          let cat = "";

          const { user } = this.state

          if (user.category !== undefined || user.category !== null)
               cat = user.category === 'super' ? I18n.t("ADMIN") : user.category === 'hyper' ?
                    I18n.t("SUPER_ADMIN") : user.category === 'geolocated' ?
                         I18n.t("GEOLOCATED") : I18n.t("SIMPLE_USER")
          return (
               <View style={styles.container}>
                    <StatusBar
                         backgroundColor={theme.primaryDark}
                         barStyle="light-content"
                         translucent={false}
                    />
                    <ScrollView style={{
                         flex: 1,
                         marginTop: -5
                    }}>
                         <View style={styles.userInformation}>
                              <ScrollView>
                                   <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                                        <Image source={require('./../../datas/img/users/man.png')} style={{ width: 92, height: 92 }} />
                                   </View>
                                   <View style={{ flex: 1, flexDirection: 'row' }}>
                                        {user.category === undefined || user.category === null ?
                                             this.getHeaderLeftProfil(user) : this.getHeaderLeftAgentProfil(user)
                                        }
                                        <View style={{ flex: user.category === undefined || user.category === null ? 2 : 2 }}>
                                             <Text style={styles.textInformation} >{this.state.user.firstname}</Text>
                                             <Text style={styles.textInformation} >{this.state.user.lastname}</Text>
                                             {<Text style={{ color: 'white', fontSize: 17, fontWeight: 'bold', textAlign: 'center' }}>{cat}</Text>
                                             }

                                        </View>
                                        {user.category === undefined || user.category === null ?
                                             this.getHeaderRight(user)
                                             : this.getHeaderRightAgent(user)}

                                   </View>
                              </ScrollView>

                         </View>
                         <View style={styles.networkInformation}>

                              <Text style={{
                                   marginLeft: 10, marginRight: 10, marginTop: 15, marginBottom: 5, fontSize: 17,
                                   fontWeight: 'bold', color: 'black'
                              }}>{I18n.t("ACCOUNT_INFO")}</Text>
                              <CardView style={{ marginLeft: 10, marginRight: 10, paddingBottom: 20 }}>
                                   <ScrollView>
                                        {user.category !== undefined && user.category !== null ? this
                                             .addAgentInformation(user) : null}
                                        <Text style={styles.textInformation2}>
                                             <Icon name={"location-on"} size={18} />{"  " + this.state.user.country}</Text>

                                        {user.balance !== undefined && user.balance !== null ? this.showBalance(user) : null}
                                        <Text style={styles.textInformation2}>
                                             <Icon name={"mail"} size={18} />{"  " + this.state.user.email}</Text>


                                        <Text style={styles.textInformation2}>

                                             <Icon name={"phone"} size={18} />
                                             {"  " + this.state.user.phone}</Text>
                                        {this.showPhoneSup()}
                                        <Text style={styles.textInformation2}>

                                             <Icon name={"account-balance-wallet"} size={18} />
                                             {"  " + this.state.user.network}</Text>
                                   </ScrollView>
                              </CardView>

                              {user.category === 'geolocated' ?
                                   (<Text style={{ marginLeft: 10, marginRight: 10, marginTop: 15, marginBottom: 5, fontSize: 17, fontWeight: 'bold', color: 'black' }}>{I18n.t("MY_NETWORK")}</Text>)

                                   : null}
                              {user.category === 'geolocated' ? (this.state.mynetworks.length > 0 ? this.state.mynetworks.map(item => this.generateItemNetwork(item)) : this.showLoader()) : null}
                         </View>
                    </ScrollView>

               </View>
          )
     }
     showPhoneSup() {
          if (this.state.user.phoneTransaction != undefined && this.state.user.phoneTransaction != null) {

               return (<Text style={styles.textInformation2}>

                    <Icon name={"phone"} size={18} />
                    {"  " + this.state.user.phoneTransaction}</Text>
               )
          }
     }

     getHeaderLeftProfil(user) {
          return (<View style={{ flex: 2 }}>
               <Text style={{ color: 'white', fontSize: 15, fontWeight: 'bold', textAlign: 'center' }}>{I18n.t("NETWORK")}</Text>
               <Text style={{ color: 'white', fontSize: 15, textAlign: 'center' }}>{user.network}</Text>
          </View>)
     }

     getHeaderRight(user) {
          return (<View style={{ flex: 0 }}>
          </View>)
     }

     getHeaderRightAgent(user) {

          return (<View style={{ flex: 2 }}>
               <Text style={{ color: 'white', fontSize: 15, textAlign: 'center', fontWeight: 'bold' }}>{I18n.t("MEMBER_CODE")}</Text>
               <Text style={{ color: 'white', fontSize: 13, textAlign: 'center' }}>{user.code_membre}</Text>
          </View>)

     }

     getHeaderLeftAgentProfil(user) {
          return (<View style={{ flex: 2 }}>
               <Text style={{ color: 'white', fontSize: 15, fontWeight: 'bold', textAlign: 'center' }}>{I18n.t("NETWORK")}</Text>
               <Text style={{ color: 'white', fontSize: 13, textAlign: 'center' }}>{user.network}</Text>
          </View>)
     }

     addAgentInformation(user) {
          console.log(user)
          if (user.category === "geolocated") {
               (<View>
                    <Text style={{ marginLeft: 10, marginTop: 10, color: theme.primaryDark }}>
                         <Icon name={'code'} size={18} color={theme.primaryDark} style={{ paddingRight: 10 }} />
                         {" " + user.code_parrain}</Text>
               </View>)

          } else
               return (<View>

                    <Text style={{ marginLeft: 10, marginTop: 10, color: theme.primaryDark }}>
                         <Icon name={'code'} size={18} color={theme.primaryDark} style={{ paddingRight: 10 }} />
                         {" " + user.code_parrain}</Text>
                    <View style={{ flexDirection: 'row', justifyContent: 'space-between', width: responsiveWidth(90), marginRight: 50 }}>
                         <Text style={{ marginLeft: 12, marginTop: 10, color: theme.primaryDark }}>
                              <Icon name={"group-work"} color={theme.primaryDark} size={18} />
                              {"  " + ((user.nbre_reseau === null || user.nbre_reseau === undefined) ? 0 : user.nbre_reseau) + " " + I18n.t("FREE")}</Text>
                         <Text style={{ marginLeft: 12, marginTop: 10, color: theme.primaryDark }}>
                              <Icon name={"book"} color={theme.primaryDark} size={18} />{"  " + ((user.nbre_reseau === null || user.nbre_membre === undefined) ? 0 : user.nbre_membre) + " " + I18n.t("SAVED")}</Text>
                    </View>
               </View>)
     }

     mapUser(user) {
          const myPosition = { latitude: parseFloat(user.latitude), longitude: parseFloat(user.longitude) }

          return (<MapView
               liteMode
               ref={(ref) => { this.mapRef = ref }}
               style={styles.map}
          >
               {this.state.myPosition !== undefined ?
                    <Marker
                         title={"Vous êtes ici"}
                         minZoomLevel={10}
                         coordinate={{ longitude: myPosition.longitude, latitude: myPosition.latitude }}
                    /> :
                    null}
          </MapView>
          )
     }

     showBalance(user) {
          return <Text style={styles.textInformation2}>
               <Icon name={"folder"} size={18} />{"  " + this.state.user.balance + " "}</Text>

     }

     makeGeolocatedNetworkList() {

          return (<View>
               <Text style={{ marginLeft: 10, marginRight: 10, marginTop: 15, marginBottom: 5, fontSize: 17, fontWeight: 'bold', color: 'black' }}>Mes reseaux</Text>

          </View>)
     }

     generateItemNetwork(item) {
          return (

               <Card >

                    <CardTitle
                         title={item.name}
                         subtitle={item.phone}
                    />
                    <CardContent>
                         <View Style={{ flex: 1 }}>
                              <Text style={styles.textInformation2}>
                                   <Icon name={"code"} size={18} />{"  " + item.code_membre + " "}</Text>
                              <Text style={styles.textInformation2}>
                                   <Icon name={"people"} size={18} />{"  " + item.code_parrain + " "}</Text>

                         </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 })
                                                            this.updateContent(this.state.user)
                                                       })
                                                  },
                                                  style: 'cancel'
                                             },
                                        ],
                                   )
                              }}
                              title={I18n.t('DELETE_GEOLOCATED_USER')}
                              color="crimson"
                         />
                    </CardAction>
               </Card>)
     }

     showLoader() {
          return (<View style={{ height: responsiveHeight(20) }}><ProgressBarAndroid

               style={{ justifyContent: "center", alignItems: "center" }}
          /></View>)
     }
}

const styles = StyleSheet.create({
     userInformation: {
          backgroundColor: theme.primary,
          flex: 1,
          justifyContent: 'center',
          paddingTop: responsiveHeight(2),
          paddingBottom: responsiveHeight(5)
     },
     map: {
          height: 200,
          marginRight: responsiveWidth(5),
          marginLeft: responsiveWidth(5),
          marginVertical: 10,
     },
     networkInformation: {
          width: responsiveWidth(100),
          backgroundColor: '#EEEEEE',
          flex: 1
     },
     container: {
          flex: 1,
          backgroundColor: '#EEEEEE',
     },
     contain: {
          flexDirection: 'row',
          justifyContent: 'space-between',
     },
     identificationOptionMenuContainer: {
          flexDirection: 'row',
          paddingTop: 10,
          paddingLeft: 10,
          paddingRight: 10,
     },
     containerTouch: {
          flex: 1,
          flexDirection: 'row',
          marginRight: 2.5,
          alignItems: 'center',
          shadowColor: Color.borderColor,
          borderColor: Color.borderColor,
          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: 5,
     },
     textInformation: {
          fontSize: 16,
          color: 'white',
          textAlign: 'center'
     },
     textInformation2: {
          fontSize: 15,
          marginTop: 7,
          color: theme.primaryDark,
          marginLeft: 10,
     },
     textTitle: {
          fontSize: 25,
          color: 'white',
          fontWeight: 'bold'
     },

     textTitle2: {
          fontSize: 25,
          color: theme.primaryDark,
          fontWeight: 'bold'
     }
});