import { route } from 'preact-router'
import { useEffect, useState } from 'preact/hooks'
import { isAdministrator, isStudent } from '../../shared/constants.js'
import { server } from '../api.jsx'
import { Header } from '../components/Header.jsx'
import { MarkdownEditor } from '../components/MarkdownEditor.jsx'
import { useCurrentUser } from '../hooks.jsx'

const CreateProblem = ({}) => {
    const [source, setSource] = useState('')
    const createProblem = async () => {
        const id = await server.post('/api/problem', {
            content: source,
        })

        route(`/problem/${id}`)
    }

    return (
        <>
            <MarkdownEditor {...{ source, setSource }} />
            <button onClick={createProblem}>Aggiungi Problema</button>
        </>
    )
}

export const AdminPage = ({}) => {
    const [user] = useCurrentUser(user => {
        if (!user) {
            route('/login', true)
        } else if (isStudent(user.role)) {
            route('/', true)
        }
    })

    return (
        user && (
            <main class="page-admin">
                <Header {...{ user }} />
                <div class="subtitle">Nuovo problema</div>
                <CreateProblem />
                <div class="subtitle">Soluzioni ancora da approvare/rifiutare</div>
                ...
            </main>
        )
    )
}