import React, { useEffect, useContext, useState, useRef } from 'react';

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

// import
import { HotKeys } from 'react-hotkeys';

import {
    GlobalHeader,
} from './../../lib/';

import { LandingAPI } from '..';

import { Login, Register } from './../../lib/'

import {
    GlobalContext,
    GlobalProvider,
} from './../../lib/';

import { Location, SpotlightSearch } from './../../lib/'


/** Util */
import SettingsUtil from './../../utils/settings.utils';
/** Util Ends */

// import * as CustomComponents from './business/'

// import './App.scss';

// import '/root-application.scss';

// import 'antd/dist/antd.css';



function RootApplicationAPI({ CustomComponents, CustomModels, appSettings, ...props }) {

    return (
        <GlobalProvider CustomModels={CustomModels} CustomComponents={CustomComponents} settings={appSettings} appSettings={appSettings}>
            <Router>
                {/* <Router basename={`/${process.env.REACT_APP_BASE_ROUTE}`}> */}

                <Route path="/" component={(routeParams) => {

                    return <Routes {...routeParams} {...props} appSettings={appSettings} CustomModels={CustomModels} CustomComponents={CustomComponents} />

                }} />
            </Router>
        </GlobalProvider>
    );
}




function Routes({ history, CustomComponents, CustomModels, appSettings, ...props }) {

    const [loader, setLoader] = useState(false);

    const { user = {}, twilio } = useContext(GlobalContext);

    const modalRef = useRef();

    useEffect(() => {
        Location.getHistoryMethod(getRouterProps);
    }, []);

    useEffect(() => {

        // console.log(user);

        if (user && user.loggedCheckDone) {

            // Redirect to login page
            setLoader(false);

            // This dirty checking is maintained as we have not standardasied the response 
            // for login and profile api accross projects . Few projects like nura 
            // still run on older versions of the project
            if (!user.result && !user.id && (user.result && !user.result.id) && !user.ID) {

                history.push('/login');
            }
        }
    }, [user]);


    const getRouterProps = () => ({ history: history });

    const keyMap = {
        moveUp: 'Shift+B',
        spotlight: 'Shift+F'
    }

    const handlers = {

        'moveUp': (event) => this.toggleSideNav(this.state.sideNavExpanded),
        'spotlight': (event) => {

            console.log(modalRef);
            // modalRef.current.openModal();
            // SettingsUtil.openSpotlightModal();
        }
    }


    useEffect(() => {
        return () => { };
    }, []);

    return (
        <div className={`app`}>
            <div className={`content ${twilio ? 'connected' : ''}`}>
                {/* Onboarding welcome card */}
                {!loader && user.loggedCheckDone ? (
                    <div>
                        <Switch>

                            {/* Login Page */}
                            <Route exact path="/login" render={(routeParams) => {

                                return <Login appSettings={appSettings} {...routeParams} />
                            }} />
                            {/* Login Page Ends */}


                            {/* Register Page */}
                            <Route exact path="/register" render={(routeParams) => {

                                return <Register appSettings={appSettings} {...routeParams} />
                            }} />
                            {/* Register Page Ends */}


                            <Route
                                // exact
                                path="/"
                                // component={Landing}
                                render={(routeParams) =>
                                    <LandingAPI
                                        appSettings={appSettings}
                                        CustomComponents={CustomComponents}

                                        CustomModels={CustomModels}
                                        {...routeParams}

                                        {...props}
                                    />
                                    // </HotKeys>
                                }
                            ></Route>


                            {/* <SpotlightSearch ref={modalRef} /> */}
                        </Switch>
                    </div>
                ) : (
                    <div>
                        {/* <GlobalHeader loading={loader} appSettings={appSettings}
                        /> */}
                        {/* <PlaceHolder type="listing" /> */}
                    </div>
                )}
            </div>
        </div>
    );
}




export default RootApplicationAPI;
