import { isAdministrator, Solution as SolutionModel, SolutionStat } from '../../shared/model'
import { sortByStringKey } from '../../shared/utils'
import { prependBaseUrl } from '../api'
import { Header } from '../components/Header'
import { Solution } from '../components/Solution'
import { useResource } from '../hooks'
import { useCurrentUser } from '../hooks/useCurrentUser'

type RouteProps = {
    uid: string
}

export const UserPage = ({ uid }: RouteProps) => {

    const [user] = useCurrentUser()

    const [stats] = useResource<null | Record<string, SolutionStat>>(`/api/stats`, null)
    if(stats) {
        const userStats = stats[uid]

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

            return (
            <>
                <Header />
                <main class="page-profile">
                    <div class="subtitle">Profilo di <a href={prependBaseUrl(`/u/${uid}`)}>@{uid}</a></div>
                    <hr />
                    <div class="subtitle">Statistiche</div>
                    <div class="info">
                        <div>Soluzioni inviate</div>
                        <div>Soluzioni corrette</div>
                        <div class="info-box">
                            {userStats.sentSolutionsCount}
                        </div>
                        <div class="info-box">
                            {userStats.correctSolutionsCount}
                        </div>
                    </div>
                    <div class="subtitle">Soluzioni notevoli</div>
                    <div class="solution-list">
                        {sortedSolutions.map(solution => (
                            <Solution refreshSolution={refreshSolutions} {...solution} adminControls={user !== null && isAdministrator(user.role)} />
                        ))}
                    </div>
                </main>
            </>
        )
    } else {
        return <></>
    }
}