import { useLocation } from 'preact-iso';
import bible from '../nkjvbible'
import { Dispatch, StateUpdater } from 'preact/hooks';

function SelectChapters(book){
	let chapters = []
	for (let i = 0; i < bible.find(a => a.name == book).chapters.length; i++) {
		chapters.push(i)
	}
	return (
		chapters.map(a => (
			<option key={a} value={a}>{a + 1}</option>
		))
	)
}
export function Header({ book, chapter }: { book: {
    get: () => any;
    set: (book: any) => void;
}, chapter: {
    get: () => number;
    set: (chapter: any) => void;
} }) {
	const { url } = useLocation();

	return (
		<header style={{ justifyContent: "space-between", minHeight: "50px" }}>

			<select value={book.get()} onChange={(e) => book.set(e.target.value)}>
				{bible.map(a => (
					<option key={a.name} value={a.name}>{a.name}</option>
				))}
			</select>
			<select value={chapter.get()} onChange={(e) => chapter.set(e.target.value)}>
					{SelectChapters(book.get())}
			</select>
		</header>
	);
}
