import * as React from 'react';
import { connect } from "react-redux";
import { createDrawerNavigator } from '@react-navigation/drawer';
import { saveUserInfo, savePlainUserInfo } from "../../redux/actions/AppUserInfoActions";
import NetInfo from "../../components/netstatus";
import CustomDrawer from '../../components/drawer.js';
import Theme from '../../components/theme.style.js';
import DB from '../../components/storage/';
import TabScreen from './tab.js';
import IQAirScreen from '../iqair';
import CustomSafeArea from '../../components/safeArea.component';

const Drawer = createDrawerNavigator();

class App extends React.PureComponent {

  constructor(props) {
    super(props)
  }

  state = {
    user: null,
  }

  componentDidMount() {
    this.init()
  }

  componentWillUnmount() {
    
  }

  init = async () => {
    let isGuest = await DB.get('is_guest')
    if(!isGuest){
      if(this.props.userinfo == undefined && this.props.userinfo == null) {
        this.getUserInfo(data => {
          this.setState({ user: data })
        })
      } else {
        this.setState({ user: this.props.userinfo.data })
      }
    }
  }

  getUserInfo = async (callback) => {
    const SESSION = await DB.session()
    const user = await DB.profile()
    this.setState({ user: user.data })
    NetInfo.netstatus(isConnected => {
      if(isConnected) {
        this.props.savePlainUserInfo(user)
        this.props.saveUserInfo({ token: SESSION.token, card_number: SESSION.user.card_number  }).then(res => {
          callback(res.data)
        })
        .catch(error => {})
      } else {
        calllback(user.data)
      }
    })
  }

  render() {
    let userProfile = [
      {
        name: Theme.formatter.NAME((this.props.userinfo != undefined && this.props.userinfo.data != undefined) ? this.props.userinfo.data : this.state.user ? this.state.user : null) || "Name",
        avatar_url: (this.props.userinfo != undefined && this.props.userinfo.data != undefined) ? this.props.userinfo.data.photo : (this.state.user != null && this.state.user.photo != undefined) ? this.state.user.photo : "",
        subtitle: (this.props.userinfo != undefined && this.props.userinfo.data != undefined) ? this.props.userinfo.data.card_number : (this.state.user != null && this.state.user.card_number != undefined) ? this.state.user.card_number : "",
        icon: 'chevron-right'
      }
    ]
    return (
      <Drawer.Navigator initialRouteName="MenuTab" drawerContent={drawerprops => <CustomDrawer props={drawerprops} User={userProfile} /> } screenOptions={{ headerShown: false }}>
        <Drawer.Screen name="MenuTab" component={TabScreen} />
      </Drawer.Navigator>
    );  
  }

}

const mapStateToProps = (state) => {
  return {
    userinfo: state.appUserInfoReducer.userinfo
  }
}

const mapDispatchToProps = {
  saveUserInfo,
  savePlainUserInfo
}

export default connect(mapStateToProps, mapDispatchToProps)(App)