import React, {Component} from 'react';
import {StyleSheet, View, Button, Alert} from 'react-native';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import AppInit from './views/AppInit';
import Home from './views/Home';
import Manage from './views/Manage';
import PrintPage from './views/PrintPage';
import ErrorPage from './views/ErrorPage';
import NetInfo from '@react-native-community/netinfo';
const HomeNavigation = createStackNavigator(
  {
    Home: {screen: Home},
    Manage: {screen: Manage},
  },
  {initialRouteName: 'Home', headerMode: 'none'},
);
const NestNavigation = createStackNavigator(
  {
    HomeNavigation: {screen: HomeNavigation},
    // Modal: {screen: Modal},
  },
  {initialRouteName: 'HomeNavigation', mode: 'modal', headerMode: 'none'},
);

const routes = {
  AppInit: {
    screen: AppInit,
    navigationOptions: {
      title: 'AppInit',
    },
  },
  Home: {
    screen: Home,
    navigationOptions: {
      title: 'Home',
    },
  },
  Manage: {
    screen: Manage,
    navigationOptions: {
      title: 'Manage',
    },
  },
  PrintPage: {
    screen: PrintPage,
    navigationOptions: {
      title: 'PrintPage',
    },
  },
  ErrorPage: {
    screen: ErrorPage,
    navigationOptions: {
      title: 'ErrorPage',
    },
  },
};

// const AppContainer = createAppContainer(NestNavigation);

type Props = {};
// const unsubscribe;
export default class App extends Component<Props> {
  constructor(props) {
    super(props);
    this.state = {
      wifiChecking: true,
      connectionInfo: {
        type: 'none',
        isConnected: false,
      },
      // defaultPage: 'AppInit',
      defaultPage: 'Home',
    };
  }

  async componentDidMount() {
    // Subscribe
    this.unsubscribe = NetInfo.addEventListener(state => {
      this.checkWIFIStatus(state);
      console.log('subscribe Connection type', state.type);
      console.log('subscribe Is connected?', state.isConnected);
    });
  }

  componentWillUnmount() {
    this.unsubscribe();
    console.log('>>>><<<<<<<< : componentWillUnmount');
  }

  getNetStatus() {
    NetInfo.fetch().then(state => {
      console.log('getNetStatus type', state.type);
      console.log('getNetStatus IS connected?', state.isConnected);
      this.setState({
        wifiChecking: false,
        connectionInfo: {
          type: state.type,
          isConnected: state.isConnected,
        },
        defaultPage:
          // state.type == 'wifi' && state.isConnected ? 'PrintPage' : 'ErrorPage',
          'Home',
      });
    });
  }

  /**
   *
   * @param {*} state
   */
  async checkWIFIStatus(state) {
    console.log('--- checkWIFIStatus');
    if (state.type == 'wifi' && state.isConnected) {
      this.setState({
        wifiChecking: false,
        connectionInfo: {
          type: state.type,
          isConnected: state.isConnected,
        },
        // defaultPage: 'PrintPage',
        defaultPage: 'Home',
      });
      return new Promise(resolve =>
        setTimeout(() => {
          resolve('result');
        }, 0),
      );
    } else {
      this.setState({wifiChecking: true});
      // setTimeout(this.getNetStatus(), 300000);
      return new Promise(resolve =>
        setTimeout(() => {
          this.getNetStatus();
          resolve('result');
        }, 30000),
      );
    }
  }

  createDynamicRoutes = initiaRoute => {
    return createAppContainer(
      createStackNavigator(routes, {
        initialRouteName: initiaRoute,
      }),
    );
  };

  render() {
    console.log(
      ' --- Render >>> this.state.defaultPage :',
      this.state.defaultPage,
    );
    const AppContainer = this.createDynamicRoutes(this.state.defaultPage);

    return (
      <AppContainer
        ref={nav => {
          this.navigator = nav;
        }}
      />
    );
  }
}