/**
 * React Native Full App (https://store.enappd.com/product/react-native-full-app)
 *
 * Copyright © 2019-present Enappd. All rights reserved.
 *
 * This source code is licensed as per the terms found in the
 * LICENSE.md file in the root directory of this source tree.
 */

import React, { Component } from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';
import NetInfo from "@react-native-community/netinfo";
import { Container } from 'native-base';
import HeaderCommon from '../../components/common/header';
import { NavigationDrawerScreenProps } from 'react-navigation-drawer';
import * as Font from 'expo-font';
interface Iprops extends NavigationDrawerScreenProps {
}
export default class NetInfoExapmle extends Component<Iprops> {
  state = {
    isConnected: null,
    netWorkType: '',
    effectiveType: '',
    fontLoaded: false,
  };
  toggleMenu = () => this.props.navigation.toggleDrawer();
  async componentDidMount() {
    // NetInfo.addEventListener(
    //         'change',
    //         this._handleConnectivityChange,
    //     );
    NetInfo.fetch().then((isConnected: any) =>
        { this.setState({ isConnected: isConnected.isConnected, netWorkType: isConnected.type}); });

      //   NetInfo.useNetInfo().then((connectionInfo) => {
      //   console.log('Initial, type: ' + connectionInfo.type + ', effectiveType: ' + connectionInfo.effectiveType);
      //   this.setState({ netWorkType: connectionInfo.type, effectiveType: connectionInfo.effectiveType });
      // });

    // NetInfo.addEventListener(
    //         'connectionChange',
    //         () => this.handleFirstConnectivityChange,
    //     );
    await Font.loadAsync({
        'montserrat': require('../../assets/Fonts/Montserrat.ttf'),
      });
    this.setState({ fontLoaded: true });
  }
  handleFirstConnectivityChange(connectionInfo: any) {
    this.setState({ netWorkType: connectionInfo.type, effectiveType: connectionInfo.effectiveType });
    NetInfo.removeEventListener(
            'connectionChange',
            () => this.handleFirstConnectivityChange,
        );
  }

  // componentWillUnmount() {
  //   NetInfo.isConnected.removeEventListener(
  //           'change',
  //           () => this._handleConnectivityChange,
  //       );
  // }

  _handleConnectivityChange = (isConnected: any) => {
    this.setState({
        isConnected,
      });
  }

  render() {
    const { isConnected, netWorkType, effectiveType, fontLoaded } = this.state;
    return (
            <Container>

                <HeaderCommon title='Net Info' toggleMenu={this.toggleMenu} />
                {fontLoaded ? <View style={styles.container}>
                    <Text style={styles.paragraph}>In this app we are using NetInfo API for getting network information.This API is pre-installed in managed apps.</Text>
                    <Text style={styles.paragraph}>To use it in a bare React Native app, you have to install NetInfo API from  `react-native-community/netinfo` package by this command `react-native link @react-native-community/netinfo`.</Text>
                    <Image source={require('../../assets/Common/Network.png')} style={styles.imageCss} />
                    <Text style={styles.paragraph}>Connected To Internet => <Text style={isConnected ? styles.online : styles.offline}>{isConnected ? 'Online' : 'Offline'}</Text></Text>
                    <Text style={styles.paragraph}>netWorkType => {netWorkType}</Text>
                    <Text style={styles.paragraph}>effectiveType => {effectiveType}</Text>
                </View> : null}
            </Container>
      );
  }
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 10 },
  paragraph: {
    fontFamily: 'montserrat',
    margin: 5,
    fontSize: 18,
    textAlign: 'center',
    color: '#34495e',
  },
  online: {
    color: 'green',
  },
  offline: {
    color: 'red',
  },
  textCssButton: {
    color: 'white',
    fontFamily: 'montserrat',
    width: '100%',
    textAlign: 'center',
  },
  buttonCss: {
    width: '100%',
  },
  imageCss: { width: 200, height: 200, margin: 24 },
});
