PROTECTED_ROUTE --------------------------------------------------------

import React from 'react';
import { Route, Redirect } from 'react-router-native';
import { AsyncStorage } from 'react-native';
import LayoutComponent from '../../layouts/AppLayout/index';
import LoadingApp from '../LoadingApp';
import Loading from '../Loading';
import ImagePreloader from '../../../../utils/preloader';
import Images from '../../../../assets/images/index';


class ProtectedRoute extends React.Component {
  constructor() {
    super();

    this.state = {
      ready: false,
      token: null,
    };

    this.checkToken = this.checkToken.bind(this);
  }

  componentDidMount() {
    ImagePreloader([Images.logo, Images.logoSquared, Images.logoIcon]);
    this.checkToken();
  }

  async checkToken() {
    const self = this;
    AsyncStorage.getItem('reactnativemeteor_usertoken').then((token) => {
      setTimeout(() => {
        self.setState({
          ready: true,
          token,
        });
      }, 1900);
    });
  }

  render() {
    const {
      component: Component, name, menu, back, footer, headTourIcon, headCommunityIcon, headInboxIcon, initialized, ...rest
    } = this.props;
    const { ready, token } = this.state;
    console.log('READY', ready);
    console.log('INITIALIZED', initialized);

    // console.log('headTourIcon_PROTECTED_ROUTE', headTourIcon);
    if (!ready && !initialized) return <LoadingApp />;
    if (!ready) return <Loading />;

    // Initialize Rendering function
    const renderFunc = (props) => {
      // Check for User Auth
      if (token) {
        // If user is Authenticated then continue
        return (
          <LayoutComponent title={name} footer={footer} headTourIcon={headTourIcon} headCommunityIcon={headCommunityIcon} headInboxIcon={headInboxIcon} menu={menu} back={back}>
            <Component {...props} />
          </LayoutComponent>
        );
      }

      // If user is not authenticated then redirect them to login

      return <Redirect to="/intro" />;
    };

    // Return React Router's route with render function
    return <Route render={renderFunc} {...rest} />;
  }
}

// Set Component Prop Types
ProtectedRoute.propTypes = {};
ProtectedRoute.defaultProps = {};

export default ProtectedRoute;