import Router from 'preact-router'
import { route } from 'preact-router'
import { useEffect } from 'preact/hooks'
import { AdminPage } from './pages/Admin'

import { HomePage } from './pages/Home'
import { LoginPage } from './pages/Login'
import { ProblemPage } from './pages/Problem'
import { ProfilePage } from './pages/Profile'

const Redirect = ({ to }: { to: string }) => {
    useEffect(() => {
        route(to, true)
    }, [])

    return (
        <>
            Redirecting to <pre>{to}</pre>...
        </>
    )
}

export const App = ({ url }: { url?: string }) => {
    return (
        <Router url={url}>
            <HomePage
                // @ts-ignore
                path="/"
            />
            <LoginPage
                // @ts-ignore
                path="/login"
            />
            <ProfilePage
                // @ts-ignore
                path="/profile"
            />
            <ProblemPage
                // @ts-ignore
                path="/problem/:id"
            />
            <AdminPage
                // @ts-ignore
                path="/admin"
            />
            <Redirect
                // @ts-ignore
                default
                to="/"
            />
        </Router>
    )
}