import Router from 'preact-router'
import { route } from 'preact-router'
import { useContext, useEffect } from 'preact/hooks'
import { prependBaseUrl } from '../shared/utils'

import { ServerContext } from './hooks'
import { UserProvider } from './hooks/useCurrentUser'

import { AdminPage } from './pages/AdminPage'
import { ErrorPage } from './pages/ErrorPage'
import { HomePage } from './pages/HomePage'
import { LoginPage } from './pages/LoginPage'
import { NotFoundPage } from './pages/NotFoundPage'
import { ProblemPage } from './pages/ProblemPage'
import { ProfilePage } from './pages/ProfilePage'
import { ScoresPage } from './pages/ScoresPage'
import { UserPage } from './pages/UserPage'

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

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

export const App = ({ url }: { url?: string }) => {
    // during server side rendering don't prepend the BASE_URL
    const pbu = useContext(ServerContext) ? (s: string) => s : prependBaseUrl

    const handleRouteChange = () => {
        // @ts-ignore
        if (typeof window !== 'undefined' && window.goatcounter) {
            // @ts-ignore
            window.goatcounter.count({
                path: location.pathname + location.search + location.hash,
            })
        }
    }

    return (
        <UserProvider>
            <Router url={url} onChange={handleRouteChange}>
                <HomePage
                    // @ts-ignore
                    path={pbu('/')}
                />
                <LoginPage
                    // @ts-ignore
                    path={pbu('/login')}
                />
                <ProfilePage
                    // @ts-ignore
                    path={pbu('/profile')}
                />
                <ProblemPage
                    // @ts-ignore
                    path={pbu('/problem/:id')}
                />
                <UserPage
                    // @ts-ignore
                    path={pbu('/u/:uid')}
                />
                <AdminPage
                    // @ts-ignore
                    path={pbu('/admin')}
                />
                <ScoresPage
                    // @ts-ignore
                    path={pbu('/scores')}
                />
                <ErrorPage
                    // @ts-ignore
                    path={pbu('/error')}
                />
                <NotFoundPage
                    // @ts-ignore
                    default
                />
            </Router>
        </UserProvider>
    )
}