import { render } from 'preact';
import { LocationProvider, Router, Route } from 'preact-iso';

import { Header } from './components/Header.jsx';
import { Home } from './pages/Home/index.jsx';
import { NotFound } from './pages/_404.jsx';
import './style.css';

import { signal } from "@preact/signals";


export function App() {
	let book = (function() {
	// The reactive data
		let state = signal(localStorage.getItem('book') || 'Genesis');

		function get () {
			return state.value;
		}

		function set (book) {
			state.value = book;
			localStorage.setItem("book", book)
		}

		return {get, set}
	}())
	let chapter = (function() {
		// The reactive data
			let state = signal(localStorage.getItem('chapter') || 0);
	
			function get () {
				return +state.value;
			}
	
			function set (chapter) {
				state.value = chapter;
				localStorage.setItem("chapter", chapter)
			}
	
			return {get, set}
		}())
	return (
		<LocationProvider>
			<Header book={book} chapter={chapter} />
			<main>
				<Router>
					<Route path="/" component={Home} book={book} chapter={chapter} />
					<Route default component={NotFound} />
				</Router>
			</main>
		</LocationProvider>
	);
}

render(<App />, document.getElementById('app'));
