import React, { useContext, useEffect, useState } from 'react';
import { RouteComponentProps } from 'react-router-dom';
import ReLoginModal from './components/shared/ReLoginModal';
import SessionExpiredModal from './components/shared/SessionExpiredModal';
import WizardAside from './components/wizardLayout/WizardAside';
import WizardMain from './components/wizardLayout/WizardMain';
import WizardNavigator from './components/wizardLayout/WizardNavigation';
import WizardProgress from './components/wizardLayout/WizardProgress';
import { AppMetadataDispatchContext } from './context/AppMetadataContext';
import {
    fetchLoggedInUser,
    fetchLoggedInUsersAccount,
    fetchProducts,
    getSerchTrackingGuid,
    loadPCMConfig,
    setLoggedInUserJwtToken
} from './reducers/AppMetadataReducer';
import { IRouteUrlParams } from './reducers/RouteReducer';

// import '@patternfly/react-core/dist/styles/base.css';
import 'react-bootstrap-typeahead/css/Typeahead.css';
import './components/shared/fileUpload/css/fileSelector.css';
import './components/shared/input/css/dropdownList.css';
import './css/app.css';
import './css/feedbackForm.css';
import './css/pagination.css';
import './css/productSelector.css';
import './css/results.css';

export default function App(routeProps: RouteComponentProps<IRouteUrlParams>) {
    const [showReLoginModal, setShowReLoginModal] = useState(false);
    const [showSessionExpiredModal, setShowSessionExpiredModal] = useState(false);
    const dispatchToAppMetadataReducer = useContext(AppMetadataDispatchContext);

    // Configuring callbacks to show modals in case of auth logout or session expiry
    useEffect(() => {
        window.chrometwo_require(['session'], (session) => {
            session.on('AuthLogout', () => setShowReLoginModal(true));
            ['AuthRefreshError', 'TokenExpired'].forEach(eventName => session.on(eventName, () => {
                if (!session.isAuthenticated()) {
                    setShowSessionExpiredModal(true);
                }
            }));
        });
    }, []);

    // Loading app metadata
    useEffect(() => {
        setLoggedInUserJwtToken(dispatchToAppMetadataReducer, window.sessionjs.getToken());
        fetchProducts(dispatchToAppMetadataReducer);
        fetchLoggedInUser(dispatchToAppMetadataReducer, window.sessionjs.getToken());
        fetchLoggedInUsersAccount(dispatchToAppMetadataReducer, window.sessionjs.getToken());
        loadPCMConfig(dispatchToAppMetadataReducer);
        getSerchTrackingGuid(dispatchToAppMetadataReducer);
    }, []);

    const login = () => {
        window.sessionjs.login();
        setShowReLoginModal(false);
        setShowReLoginModal(false);
    };

    return (
        <div className="se-grid">
            <WizardProgress routeProps={routeProps} />
            <WizardMain routeProps={routeProps} />
            <WizardNavigator routeProps={routeProps} />
            <WizardAside routeProps={routeProps} />
            <ReLoginModal isOpen={showReLoginModal} login={login} />
            <SessionExpiredModal isOpen={showSessionExpiredModal} login={login} />
        </div>
    );
}
