/**
 * 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 RNDeviceInformation from 'fm-react-native-device-info';;
import AppContainer, {AppNavigator} from '../../App';
import Configuration from '../../webservice/persistences/Configuration';

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 {
          RNDeviceInformation.getDeviceCountryCode().then(code => {
            I18n.locale = code.toLowerCase();;
            readUser()
              .then(result => {
                setTimeout(() => {
                  this.updateUser(result);
                }, 3000);;
              })
              .catch(e => {
                this.props.navigation.navigate('Auth');;
              });
          });;
        }
      })
      .catch(e => {
        RNDeviceInformation.getDeviceCountryCode().then(code => {
          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' ||
      item === 'createIdentification'
    ) {
      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>
                         <SafeAreaView style={{
                              flex: 1,
                         }} forceInset={{ top: 'always', horizontal: 'never' }}>
                              {
                                   this.state.items && Object.keys(this.state.items).map((item, key) => {
                                        return this._renderItem(item)
                                   })
                              }
                         </SafeAreaView>
                         <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 !== 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,
  },
});