/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

 
import React, {Component} from 'react';
import {Platform, StyleSheet,Alert,FlatList, Text, View,TouchableOpacity,Linking} from 'react-native';
import ActionButton from 'react-native-action-button';
import Icon from 'react-native-vector-icons/Ionicons';
import {responsiveFontSize,responsiveHeight,responsiveWidth} from 'react-native-responsive-dimensions';
import HeaderMenu from './HeaderMenu';
import {historiques as histo,first,useraccount,notification,configurations} from './../../route.json';
import {primary,primaryDarkAdvanced} from './../../utils/theme.json';
import {readUser,disconnect} from './../../webservice/AuthApi';
import I18n from 'react-native-i18n'
const route=require("./../../route.json")
require('./../../utils/Translations')
var DBEvents = require('react-native-db-models').DBEvents
type Props = {};
let theme=require('./../../utils/theme.json')
import Button from 'apsl-react-native-button'
import {IlinkEmitter} from "./../../utils/events"
import { DrawerItems, SafeAreaView } from 'react-navigation';
import DeviceInfo from "react-native-device-info"
import AppContainer, {AppNavigator} from "../../App";
import Configuration from "../../webservice/persistences/Configuration";
import { ScrollView } from 'react-native-gesture-handler';

export default class OptionsMenu extends Component<Props> {

    static navigatorStyle = {
    statusBarColor: primaryDarkAdvanced,
  };
    commandeListe
  constructor(props){
    super(props);
    this.state=this.initState();
      IlinkEmitter.on("menuLink", this.onMenuNavigationEvent.bind(this))
      IlinkEmitter.on("userconnect", this.onUserConnect.bind(this))
      IlinkEmitter.on("userdisconnect", this.hideSideMenu.bind(this))
      IlinkEmitter.on("langueChange", this.updateLangue.bind(this))
      this.configuration=new Configuration();
  }

  retrieveAndroidInformation() {
    this.configuration._getData().then((lang)=>{
                  if(lang){
                      I18n.locale=lang
                      readUser().then((result) => {
                          setTimeout(() => {
                            this.updateUser(result);
                        }, 3000)})
                  }else{
                     let code= DeviceInfo.getDeviceLocale();
                          I18n.locale=code.toLowerCase()
                          readUser().then((result) => {
                              setTimeout(() => {
                                this.updateUser(result);
                            }, 3000)
                          }).catch((e) => {
                              this.props.navigation.navigate("Auth")
                          });
                  }
          }).catch((e)=>{
             let code=DeviceInfo.getDeviceLocale()
                  I18n.locale=code.toLowerCase()
                  readUser().then((result) => {
                      setTimeout(() => {
                        this.updateUser(result);
                    }, 3000)
                  }).catch((e) => {
                      this.props.navigation.navigate("Auth")
                  });

          
          })
      
              return  ""
      }
    componentDidMount() {
        const items=this.props.navigation.router.childRouters.sta.childRouters;
     //   items.filter((item)=>item.)
        this.setState({items:items})
        this.retrieveAndroidInformation()
        

    }
    updateLangue(){
        this.setState({lang:"change"})
        this.forceUpdate()
    }
    componentWillUnmount() {

  }
    onMenuNavigationEvent(menuOption){
       /* Navigation.mergeOptions(this.props.componentId,{
            sideMenu: {
                left: {
                    visible: false,
                }
            }
        })
       switch (menuOption){
            case "home":{
                this.setState({currentId:0})
            }
                break;
            case "userInfo":{
                this.setState({currentId:1})
            }
        }*/
    }
    onUserConnect() {
        readUser().then((user) => {
            if (user !== null && user !== undefined) {
                this.updateUser(user);
            }
        });
    }
    onNavigatorEvent(event) {

    }
    hideSideMenu() {
      /*  Navigation.mergeOptions("drawer", {
            sideMenu: {
                left: {
                    visible: false,
                    enabled:false
                }
            }
        });*/
    }
    initState(){
    return {
      user:null,
      menu:[],
      currentId:0,
    }
  }
    getGeolocatedUserMenu(){
        return [
            {title:I18n.t('MAP'),id:0,key:0,icon:'md-map',active:true}
            ,{title:I18n.t('MY_ACCOUNT'),id:1,key:1,icon:'md-person',active:false}
            ,{title:I18n.t('CREDIT_MANAGE'),id:2,key:2,icon:'md-card',active:false}
            ,{title:I18n.t('ADD_NETWORK'),id:11,key:11,icon:'md-people',active:false}
            , {title:I18n.t('CHANGE_INFORMATION'),id:13,key:13,icon:'md-person',active:false}
            ,{title:I18n.t('NOTIFICATIONS'),id:3,key:3,icon:'md-notifications',active:false}
            ,{title:I18n.t('CONFIGURATIONS'),id:4,icon:'md-settings',active:false}]
    }
    getSuperUserMenu(){
        return [
            {title:I18n.t('MAP'),id:0,key:0,icon:'md-map',active:true}
            ,{title:I18n.t('MY_ACCOUNT'),id:1,key:1,icon:'md-person',active:false}
            ,{title:I18n.t('CREDIT_MANAGE'),id:2,key:2,icon:'md-card',active:false}
            ,{title:I18n.t('GROUP_MANAGE'),id:5,key:5,icon:'md-people',active:false}
            ,{title:I18n.t('NOTIFICATIONS'),id:3,key:3,icon:'md-notifications',active:false}
            ,{title:I18n.t('CONFIGURATIONS'),id:4,icon:'md-settings',active:false}]
    }
    getHyperUsermenu() {
        return [
            {title:I18n.t('MAP'),id:0,key:0,icon:'md-map',active:true}
            ,{title:I18n.t('MY_ACCOUNT'),id:1,key:1,icon:'md-person',active:false}
            ,{title:I18n.t('CREDIT_MANAGE'),id:2,key:2,icon:'md-card',active:false}
            ,{title:I18n.t('GROUP_MANAGE'),id:5,key:5,icon:'md-people',active:false}
            ,{title:I18n.t('NOTIFICATIONS'),id:3,key:3,icon:'md-notifications',active:false}
            ,{title:I18n.t('CONFIGURATIONS'),id:4,icon:'md-settings',active:false}]
    }
    updateUser(user){
  let menu=[];
  if(user!==undefined) {
    /*  Navigation.mergeOptions("drawer", {
          sideMenu: {
              left: {
                  visible: false,
                  enabled:true
              }
          }
      });*/
      if(user.category!==undefined) {
          switch(user.category){
              case "geolocated":
                  menu=this.getGeolocatedUserMenu();
                  break;
              case "super":
                  menu = this.getSuperUserMenu();
                  break;
              case "hyper":
                  menu=this.getHyperUsermenu();
                  break;

          }
      }else
          {
              menu = this.getUserMenu();
          }
      }


      this.setState({user: user, menu: menu});
  }
    getUserMenu(){
        return [
            {title:I18n.t('MAP'),id:0,key:0,icon:'md-map',active:true}
            ,{title:I18n.t('MY_ACCOUNT'),id:1,key:1,icon:'md-person',active:false}
            ,{title:I18n.t('NOTIFICATIONS'),id:3,key:3,icon:'md-notifications',active:false}
            ,{title:I18n.t('CONFIGURATIONS'),id:4,icon:'md-settings',active:false}]
}
  _renderItem = (item) =>{
        if(item==="creditrequest" || item==='historyItemDetails' || item==='filter' || item==='networks'){
            return null
        }else{
            const color= this.state.currentId===item.id?theme.accent:"grey"
       return (
        <TouchableOpacity onPress={() => {
            this.props.navigation.toggleDrawer();
            this.setState({currentId:item.id})
            this.props.navigation.navigate(item)}}
        >
        <View 
            style={items.content}
        >
            <Icon
                name={this.getIcon(item)}
                size={32}
            />
        <Text style={{
            marginLeft:20,
            fontSize:16,
        }}>{this.getNameItems(item)}
        </Text>
        </View></TouchableOpacity>)}};
        _onPress=((item)=>{

            this.setState({currentId:item.id})
            let current=this.state.menu.filter((item)=>{return item.active})[0]
            current.active=false;
            item.active=true;
            let newMenu=[];
            this.state.menu.forEach(function (it) {
                    if(it.id===current.id)newMenu.push(current)
                    else if(it.id===item.id)newMenu.push(item)
                    else newMenu.push(it)
                }
            )
            this.setState({menu:newMenu})
       /*    switch(item.id){
               case 2:
                  Navigation.push(route.stackRoot,{
                    component: {
                        name: histo,
                    },
                      options: {
                          topBar: {
                              title: {
                                  text: I18n.t('CREDIT_MANAGE')
                              }
                          }
                      }
              });
                break;
               case 0:
                   Navigation.popToRoot(route.stackRoot)
                  IlinkEmitter.emit("menuLink","home");
               break;
               case 1:
                   Navigation.push(route.stackRoot,{
                       component: {
                           name:useraccount,
          },
                       options: {
                           sideMenu:{
                               visibility:false
                           },
                           topBar: {
                               title: {
                                   text:I18n.t('MY_ACCOUNT')
                               },
                               hideOnScroll: true,

                           }
                       }
                   });
                   IlinkEmitter.emit("menuLink","userInfo");
                  break;
              case 3:
                  Navigation.push(route.stackRoot,{
                      component: {
                          name:notification,
                      },
                      options: {
                          topBar: {
                              title: {
                                  text:I18n.t('NOTIFICATION')

                              }
                          }
                      }
                  });
                  IlinkEmitter.emit("menuLink","notification");

                  break;
              case 4:
                  Navigation.push(route.stackRoot,{
                      component: {
                          name:configurations,
                      },
                      options: {
                          topBar: {
                              title: {
                                  text:I18n.t('CONFIGURATIONS')

                              }
                          }
                      }
                  });
                  IlinkEmitter.emit("menuLink","config");
                  break;
              case 5:
                  Navigation.push(route.stackRoot,{
                      component: {
                          name:route.superviseurgroup,
                      },
                      options: {
                          topBar: {
                              title: {
                                  text:I18n.t('GROUP_MANAGE')

                              }
                          }
                      }
                  });
                  IlinkEmitter.emit("menuLink","manage_group");

                  break;
              case 7:     Navigation.push(route.stackRoot,{
                  component: {
                      name:route.credrequester,
                  },
                  options: {
                      topBar: {
                        visible:false
                      }
                  }
              });
                  break;
              case 11:
                  Navigation.push(route.stackRoot,{
                      component: {
                          name:route.addNetwork,
                      },
                      options: {
                          topBar: {
                              visible:false
                          }
                      }
                  });
                  break;
              case 12:
                  Navigation.push(route.stackRoot,{
                      component: {
                          name:route.generateNetwork,
                      },
                      options: {
                          topBar: {
                              visible:false
                          }
                      }
                  });
                  break;
              case 13:
                  Navigation.push(route.stackRoot,{
                      component: {
                          name:route.updateinfo,
                      },
                      options: {
                          topBar: {
                              visible:false
                          }
                      }
                  });
          };
            Navigation.mergeOptions(this.props.componentId,{
                sideMenu: {
                    left: {
                        visible: false,
                    }
                }
            })
     */ });
    getNameItems(item){

        let icon=item
        switch (item) {
            case "home":icon=I18n.t('MAP')
                break
            case 'useraccount':icon=I18n.t('MY_ACCOUNT')
                break
            case 'Historique':icon=I18n.t('CREDIT_MANAGE')
                break
            case "superviseurgroup":icon=I18n.t('GROUP_MANAGE')
                break
            case "updateinformation":icon=I18n.t("CHANGE_INFORMATION")
                break
            case 'notificationview':icon=I18n.t('NOTIFICATIONS')
                break
            case 'configuration':icon=I18n.t('CONFIGURATIONS')
                break;
            case 'addNetwork':icon=I18n.t('ADD_NETWORK')
                break
            case 'about':icon=I18n.t('ABOUT_')
        }
        return icon;
    }
    getIcon(item){
        let icon="md-map"
        switch (item) {
            case "home":icon="md-map"
                break
            case 'useraccount':icon="md-person"
                break
            case 'Historique':icon="md-card"
                break
            case "superviseurgroup":icon="md-people"
                break
            case 'notificationview':icon="md-notifications";
            break
            case "updateinformation":icon="md-people"
                break
            case 'configuration':icon='md-settings'
                break;
            case 'addNetwork':icon="md-people"
                break
            case 'about':icon='md-contacts';
            break;
        }
        return icon;
    }
    render () {
        var name=this.state.user?this.state.user.firstname:"";
        const surname=this.state.user? this.state.user.lastname:"";
        if(!this.state.lang && this.state.lang!=="change")
       return (
        <View style={styles.container}>
            <View
               style={styles.headercontent}
            >
                <Text style={styles.headerTitle}>{name}</Text>
                <Text style={styles.headerTitle}>{surname}</Text>
            <Text style={styles.headerPhone}>{this.state.user?""+this.state.user.phone:""}</Text>
            </View>
            <ScrollView style={{flex:1,height:responsiveHeight(40)
            }} >
            <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
                {
                    this.state.items && Object.keys(this.state.items).map((item,key)=>{
                    return this._renderItem(item)
                })
                }
            </SafeAreaView>
            </ScrollView>
            <Button
                textStyle={styles.btntext}
                style={styles.btnDeconnect}
                onPress={()=>this.userDeconnect()}
            >{I18n.t('DISCONNEXION')}</Button>
        </View>
      )
        else {
            setTimeout(() => this.setState({lang: ""}), 500)
            return (<View/>)
        }
    }
    userDeconnect(){
        Alert.alert(
            I18n.t('DISCONNEXION'),
            I18n.t('DISCONNEXION_TEXT'),
            [
                {},
                {text: I18n.t('NO'), onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
                {text: I18n.t('YES'), onPress: () =>{
                    disconnect().then(()=>{
                        IlinkEmitter.emit("userdisconnect");
                       this.props.navigation.navigate("Auth")
                    })
                }},
            ],
            { cancelable: false }
        )
    }
    watchUser() {
        readUser().then((user)=> {
            if(user.id!==this.state.user.id) {
                if (user !== null && user !== undefined) {
                    this.updateUser(user);
                }
            }
        });
    }
}

const items=StyleSheet.create({
    content:{
        width:responsiveWidth(100),
        height:50,
        paddingLeft: 20,
        flexDirection:'row',
        alignItems:'center'
    },
    itemText:{
        color:'#000000',
        marginLeft:20,
        fontSize:responsiveFontSize(2),
    }
  });
const styles = StyleSheet.create({
  container: {
    flex: 1,
      backgroundColor:"white",
  },
    btnDeconnect:{
        borderColor:"transparent",
        marginLeft:20,
        marginRight:20,
        backgroundColor:theme.accent
    },
    btntext:{
        color:"white",
        fontSize:17,
        fontWeight:"bold"
    },
  headerTitle:{
    fontSize:14,
    marginBottom:5,
    color:"white",
    fontWeight: 'bold',
  },
  headerPhone:{
    fontSize:12,
    marginBottom: 20,
    color:"white",
    justifyContent:'flex-end'
  
  },
  listMenu: {
    paddingTop: 15,
  },
  headercontent:{
      height:responsiveHeight(30),
    backgroundColor:primary,
      justifyContent: 'flex-end',
      alignItems: 'flex-start',
      paddingLeft:20

  },
  backgroundd_drawer:{
      backgroundColor:'#000',
  },
  listbackground:{
  },
  actionButtonIcon: {
    fontSize: 20,
    height: 22,
    color: 'white',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});