import React, { useState, useEffect, useRef, useCallback } from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
import localForage from 'localforage';
import './Style-light.css';
import './Style-dark.css';
import './Style-black.css';
import './Style-red.css';
import './fonts/Fonts.css';
import { BackwardDot, ForwardDot } from './utils.js';
import Feed from './Feed.js';
import Article from './Article.js';
import Comments from './Comments.js';
import Search from './Search.js';
import Submit from './Submit.js';
import Results from './Results.js';
import ScrollToTop from './ScrollToTop.js';

function App() {
	const [theme, setTheme] = useState(localStorage.getItem('theme') || '');
	const cache = useRef({});
	const [isFullScreen, setIsFullScreen] = useState(!!document.fullscreenElement);

	const updateCache = useCallback((key, value) => {
		cache.current[key] = value;
	}, []);

	const light = () => {
		setTheme('');
		localStorage.setItem('theme', '');
	};

	const dark = () => {
		setTheme('dark');
		localStorage.setItem('theme', 'dark');
	};

	const black = () => {
		setTheme('black');
		localStorage.setItem('theme', 'black');
	};

	const red = () => {
		setTheme('red');
		localStorage.setItem('theme', 'red');
	};

	useEffect(() => {
		if (Object.keys(cache.current).length === 0) {
			localForage.iterate((value, key) => {
				updateCache(key, value);
			}).then(() => {
				console.log('loaded cache from localforage');
			});
		}
	}, [updateCache]);

	const goFullScreen = () => {
		if ('wakeLock' in navigator) {
			navigator.wakeLock.request('screen');
		}
		document.body.requestFullscreen({ navigationUI: 'hide' });
	};

	const exitFullScreen = () => {
		document.exitFullscreen();
	};

	useEffect(() => {
		const onFullScreenChange = () => setIsFullScreen(!!document.fullscreenElement);
		document.addEventListener('fullscreenchange', onFullScreenChange);
		return () => document.removeEventListener('fullscreenchange', onFullScreenChange);
	}, []);

	useEffect(() => {
		if (theme === 'dark') {
			document.body.style.backgroundColor = '#1a1a1a';
		} else if (theme === 'black') {
			document.body.style.backgroundColor = '#000';
		} else if (theme === 'red') {
			document.body.style.backgroundColor = '#000';
		} else {
			document.body.style.backgroundColor = '#eeeeee';
		}
	}, [theme]);

	const fullScreenAvailable = document.fullscreenEnabled ||
		document.mozFullscreenEnabled ||
		document.webkitFullscreenEnabled ||
		document.msFullscreenEnabled;

	return (
		<div className={theme}>
			<Router>
				<div className='container menu'>
					<p>
						<Link to='/'>QotNews</Link>

						<span className='theme'><a href='#' onClick={() => light()}>Light</a> - <a href='#' onClick={() => dark()}>Dark</a> - <a href='#' onClick={() => black()}>Black</a> - <a href='#' onClick={() => red()}>Red</a></span>
						<br />
						<span className='slogan'>Hacker News, Reddit, Lobsters, and Tildes articles rendered in reader mode.</span>
					</p>
					{fullScreenAvailable &&
						<Route path='/(|search)' render={() => !isFullScreen ?
							<button className='fullscreen' onClick={() => goFullScreen()}>Enter Fullscreen</button>
						:
							<button className='fullscreen' onClick={() => exitFullScreen()}>Exit Fullscreen</button>
						} />
					}
					<Route path='/(|search)' component={Search} />
					<Route path='/(|search)' component={Submit} />
				</div>

				<Route path='/' exact render={(props) => <Feed {...props} updateCache={updateCache} />} />
				<Switch>
					<Route path='/search' component={Results} />
					<Route path='/:id' exact render={(props) => <Article {...props} cache={cache.current} />} />
				</Switch>
				<Route path='/:id/c' exact render={(props) => <Comments {...props} cache={cache.current} />} />

				<BackwardDot />
				<ForwardDot />

				<ScrollToTop />
			</Router>
		</div>
	);
}

export default App;