import { route } from 'preact-router'
import { isAdministrator, Solution as SolutionModel, User } from '../../shared/model'
import { sortByStringKey } from '../../shared/utils'
import { prependBaseUrl } from '../../shared/utils'
import { Header } from '../components/Header'
import { Solution } from '../components/Solution'
import { useResource } from '../hooks'
import { useLoggedInUser, useUserFunctions } from '../hooks/useCurrentUser'

export const ProfilePage = ({}) => {
    const [user, ready] = useLoggedInUser()
    if (!ready) {
        return <></>
    }
    if (!user) {
        route(prependBaseUrl('/login'), true)
        return <></>
    }

    const { logout } = useUserFunctions()!

    const handleLogout = async () => {
        await logout()
        route(prependBaseUrl('/'))
    }

    const [solutions, refreshSolutions] = useResource<SolutionModel[]>(`/api/solutions?user=${user.id}`, [])
    const sortedSolutions = sortByStringKey(solutions, s => s.createdAt, false)

    return (
        <>
            <Header />
            <main class="page-profile">
                <div class="subtitle">Profilo</div>
                <a href={prependBaseUrl('/u/' + user.id)} class="button" role="button">
                    Vai alla tua pagina pubblica
                </a>
                <button onClick={handleLogout}>Logout</button>
                {sortedSolutions.length > 0 && (
                    <>
                        <div class="subtitle">Le tue soluzioni</div>
                        <div class="solution-list">
                            {sortedSolutions.map(solution => (
                                <Solution refreshSolution={refreshSolutions} {...solution} adminControls={isAdministrator(user.role)} />
                            ))}
                        </div>
                    </>
                )}
            </main>
        </>
    )
}