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


import React, {Component} from 'react';
import {Alert, AsyncStorage, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import {responsiveFontSize, responsiveHeight, responsiveWidth} from 'react-native-responsive-dimensions';
import {primary, primaryDarkAdvanced} from './../../utils/theme.json';
import {disconnect, readUser} from './../../webservice/AuthApi';
import I18n from 'react-native-i18n'
import Button from 'apsl-react-native-button'
import {IlinkEmitter} from "./../../utils/events"
import {SafeAreaView} from 'react-navigation';
import DeviceInfo from "react-native-device-info"
import Configuration from "../../webservice/persistences/Configuration";
import {ScrollView} from 'react-native-gesture-handler';

const route = require("./../../route.json")
require('./../../utils/Translations')
var DBEvents = require('react-native-db-models').DBEvents
let theme = require('./../../utils/theme.json')

export default class OptionsMenu extends Component {

    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();
        readUser().then((user) => {
            if (user !== null && user !== undefined) {
                this.setState({user});
            }
        });
    }


    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;
        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('WALLET'), id: 6, key: 6, icon: 'md-wallet-outline', 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('WALLET'), id: 6, key: 6, icon: 'md-wallet-outline', 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('WALLET'), id: 6, key: 6, icon: 'md-wallet-outline', 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) {
            console.log("USER", user.category);
            /*  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('WALLET'), id: 6, key: 6, icon: 'md-wallet-outline', 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}]
    }

    redirectToScreen = (item) => {
        console.log("Item Menu Click", item);

        if (this.state.user === null)
            return;
        else {
            switch (this.state.user.category) {
                case "super":
                    if (item === "walletSelect")
                        item = "walletDetail";
                    this.props.navigation.navigate(item, {agentId: this.state.user.agentId});

                    break;
                case "hyper":
                    if (item === "walletSelect")
                        item = "walletDetail";
                    this.props.navigation.navigate(item, {agentId: this.state.user.agentId});

                    break;
                case "geolocated":
                    this.props.navigation.navigate(item);
                    break;

                default:
                    if (item === "walletSelect")
                        item = "walletDetailUser";
                    this.props.navigation.navigate(item, {userId: this.state.user.id});

                    break;
            }
        }

    }
    _renderItem = (item) => {
        if (item === "creditrequest" || item === 'historyItemDetails' || item === 'filter' || item === 'networks' || item === 'walletDetail' || item === 'walletDetailUser'
            || item === 'walletDepot' || item === 'walletRetrait' || item === 'createIdentification' || item === 'walletOptionSelect' || item === 'validateIdentification'
            || item === 'createIdentificationUser' || item === 'operateurOptionSelect' || item === 'paiementFacture' || item === 'envoieWalletToWalletUser'
            || item === 'envoieWalletToCashUser' || item === 'linkCard' || item === 'envoieWalletToCardUser' || item === 'envoieWalletToBankUser' || item === 'retraitWalletVersCashUser'
            || item === 'retraitCarteVersWalletUser' || item === 'retraitEnCashAgent' || item === 'retraitCarteVersCashAgent' || item === 'envoieCashVersWalletAgent'
            || item === 'envoieCashVersAutreWalletAgent' || item === 'retraitCarteVersCashUser' || item === 'envoiCashVersCashAgent' || item === 'envoieCashVersCashAgent'
            || item === 'envoieCashVersCarteAgent' || item === 'modifyIdentificationUser' || item === 'createGroupNanoCredit' || item === 'groupNanoCredit' || item === 'demandeValidationGroupe'
            || item === 'adhererGroupNanoCredit' || item === 'myNanoCreditGroup' || item === 'askNanoCredit' || item === 'refundNanoCreditUser' || item === 'cautionNanoCreditAgent'
            || item === 'epargnerArgentUser' || item === 'askNanoCredit' || item === 'casserEpargneUser' || item === 'envoieWalletToBankAgent' || item === 'reattachAccountUser' || item === 'insuranceSubscriptionScreen'
            || item === 'addBeneficiaryScreen' || item === 'activateBuySubscriptionScreen' || item === 'saisirFeuilleSoinScreen' || item === 'validateConsultationScreen' || item === 'validateConsultationDetailScreen'
            || item === 'executerPrescriptionScreen' || item === 'modifierFeuilleSoinScreen' || item === 'modifierExecutionPrescriptionScreen' || item === 'historiqueNanoSanteUserScreen'
            || item === 'demandeAutorisationSoinScreen' || item === 'deleteBeneficiaryScreen' || item === 'StopSubscriptionScreen' || item === 'stopSubscriptionScreen' || item === 'renewAssuranceScreen'
            || item === 'webviewScreen' || item === 'historiqueNanoSanteAgentScreen' || item === 'historiqueNanoSanteSuperHyperScreen' || item === 'PDFViewerScreen' || item === 'ubaFormScreen') {
            return null
        } else {
            const color = this.state.currentId === item.id ? theme.accent : "grey"
            //console.log("ITEM OPTION MENU", item);
            return (
                <TouchableOpacity onPress={() => {
                    this.props.navigation.toggleDrawer();
                    this.setState({currentId: item.id});
                    this.redirectToScreen(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 'walletSelect':
                icon = I18n.t('WALLET')
                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')
                break
        }
        return icon;
    }

    getIcon(item) {
        let icon = "md-map"
        switch (item) {
            case "home":
                icon = "md-map"
                break
            case 'useraccount':
                icon = "md-person"
                break
            case 'walletSelect':
                icon = "md-wallet"
                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;
            case 'ubaFormScreen':
                icon = 'md-person-add';
                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");
                            AsyncStorage.removeItem('@config:onesignalIds');
                            this.props.navigation.navigate("Auth");
                        })
                    }
                },
            ],
            {cancelable: false}
        )
    }

    watchUser() {
        readUser().then((user) => {
            if (user !== null && user !== undefined) {
                if (user.id !== this.state.user.id) {
                    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,
    },
});