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  bible from './nkjvbible.js'
import { useEffect, useState } from 'preact/hooks';
import { signal } from "@preact/signals";


export function App() {
	const [book, setBook] = useState()
	const [chapter, setChapter] = useState(0)
	const [savedBook, setSavedBook] = useState("")
	let storedBook = (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}
	}())

	return (
		<LocationProvider>
			<Header storedBook={storedBook} chapter={chapter} setChapter={setChapter} />
			<main>
				<Router>
					<Route path="/" component={Home} storedBook={storedBook} chapter={chapter} setChapter={setChapter} />
					<Route default component={NotFound} />
				</Router>
			</main>
		</LocationProvider>
	);
}

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