/*
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

import { animated, useTransition } from '@react-spring/web'
import { html } from '../bootstrap/bootstrap'
import { useLayoutState } from '../state/layout-state'
import { InkStoryView } from './story'
import { TitleScreen } from './title-screen'

export const Router = () => {
	const layoutState = useLayoutState()

	const transitions = useTransition(layoutState.currentRoute.get(), {
		from: { opacity: 0, position: 'absolute' },
		enter: { opacity: 1, position: 'relative' },
		leave: { opacity: 0 },
	})

	const renderPage = (location) => {
		switch (location) {
			case 'title':
				return html`<${TitleScreen} />`
			case 'story':
				return html`<${InkStoryView} />`
		}
	}

	return html` ${transitions(
		(style, location) =>
			html`<${animated.div} style=${style} className="full-size"> ${renderPage(location)} <//>`
	)}`
}