import { useContext, useState } from 'preact/hooks'
import { isAdministrator, Problem as ProblemModel, Solution as SolutionModel } from '../../shared/model'
import { server } from '../api'
import { Header } from '../components/Header'
import { MarkdownEditor } from '../components/MarkdownEditor'
import { Problem } from '../components/Problem'
import { Solution } from '../components/Solution'
import { MetadataContext, useCurrentUser, useListResource, useResource } from '../hooks'

type RouteProps = {
    id: string
}

export const ProblemPage = ({ id }: RouteProps) => {
    const metadata = useContext(MetadataContext)
    metadata.title = `Problem ${id}`

    const [user] = useCurrentUser()

    const [source, setSource] = useState('')

    const [{ content }] = useResource<{ content: string }>(`/api/problem/${id}`, {
        content: '',
    })

    const [solutions, refreshSolutions, setSolutionHeuristic] = useListResource<SolutionModel>(
        `/api/solutions?problem=${id}`
    )

    const sendSolution = async () => {
        await server.post('/api/solution', {
            forProblem: id,
            content: source,
        })

        setSource('')

        refreshSolutions()
    }

    return (
        <main class="page-problem">
            <Header {...{ user }} />
            <div class="subtitle">Testo del problema</div>
            <Problem id={id} content={content} />
            {solutions.length > 0 && (
                <details>
                    <summary>Soluzioni</summary>
                    <div class="solution-list">
                        {solutions.map((s, index) => (
                            <Solution
                                {...s}
                                adminControls={user !== null && isAdministrator(user.role)}
                                refreshSolution={refreshSolutions}
                                setSolution={solFn => setSolutionHeuristic(index, solFn)}
                            />
                        ))}
                    </div>
                </details>
            )}
            {user && (
                <>
                    <div class="subtitle">Invia una soluzione al problema</div>
                    <MarkdownEditor {...{ source, setSource }} />
                    <button onClick={sendSolution}>Invia Soluzione</button>
                </>
            )}
        </main>
    )
}