import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import AppContentContainer from './AppContent/AppContentContainer';
import AppMenuContainer from './AppMenu/AppMenuContainer';
import CIDetailViewContainer from './AppContent/CIDetailView/CIDetailViewContainer';
import reduxLang from '../middleware/lang';
import StartScreenContainer from './StartScreenContainer';
import { useSelector } from 'react-redux'
import { getLocaleFromURL, defineLocale, shouldDisplayDynamicComponent, getDjangoView, routePathForDynamicComponent } from '../utils';
import BurgerBtnContainer from './AppMenu/BurgerBtnContainer';

const App = ({ pending, menuOpen, setLocale, isPreLaunch }) => {
	// set initial language
	setLocale(defineLocale(isPreLaunch));
	let localeFromURL = getLocaleFromURL(window.location.pathname);
	if (localeFromURL === undefined) {
		localeFromURL = ''
	}
	const basename = '/' + localeFromURL + useSelector(state => state.urls.site);

	const activeSite = useSelector(state => state.urls.site);
	const urls = useSelector(state => state.urls.allSites[activeSite].urls);
	const DynamicComponent = React.memo(() => (
		<div className="AppContent">
			<BurgerBtnContainer />
			<div dangerouslySetInnerHTML={{ __html: getDjangoView() }} />
		</div>
	));
	return (
		<div
			className={`App ${isTouchable() ? 'touch' : ''} ${pending ? 'loading' : ''} ${
				menuOpen ? 'menuOpen' : ''
			}`}
		>
			<Router basename={basename}>
				<AppMenuContainer />
				<Switch>
					{ shouldDisplayDynamicComponent(urls) ? <Route path={routePathForDynamicComponent(basename)} component={DynamicComponent} /> : null }
					<Route path='/' component={AppContentContainer} />
				</Switch>
				<Route path='/catalog/:itemId' component={CIDetailViewContainer} />
				<Route path='/start' component={StartScreenContainer} />
			</Router>
		</div>
	);
};

export default reduxLang()(App);



const isTouchable = () => {
	return 'ontouchstart' in window || navigator.msMaxTouchPoints > 0;
};