import { route } from 'preact-router'
import { useEffect, useState } from 'preact/hooks'
import { Header } from '../components/Header.jsx'

import { Problem } from '../components/Problem.jsx'
import { Select } from '../components/Select.jsx'
import { useReadResource, useCurrentUser } from '../hooks.jsx'

export const HomePage = () => {
    const [user] = useCurrentUser()
    const [problems] = useReadResource('/api/problems', [])

    return (
        <main class="page-home">
            <Header {...{ user }} />
            <div class="board">
                <div class="fill-row board-controls">
                    <div class="sort-order">
                        <Select
                            value="oldest"
                            options={{
                                'latest': 'Prima più recenti',
                                'oldest': 'Prima più antichi',
                                'top-solved': 'Prima più risolti',
                                'least-solved': 'Prima meno risolti',
                            }}
                        />
                    </div>
                </div>

                {problems.map(p => (
                    <Problem {...p} />
                ))}
            </div>
        </main>
    )
}