import { route } from 'preact-router'
import { useContext, useEffect, useState } from 'preact/hooks'
import { isAdministrator, Problem as ProblemModel, Solution as SolutionModel } from '../../shared/model'
import { prependBaseUrl } from '../../shared/utils'
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, useListResource, useResource, ServerContext, DatabaseContext, useServerAsyncCallback } from '../hooks'
import { useLoggedInUser } from '../hooks/useCurrentUser'

import QRCode from 'react-qr-code'

export const JumbotronPage = ({}) => {
    const [problem] = useResource<ProblemModel | null>(`/api/jumbotron`, null, problem => {
        if (problem === null) {
            route(prependBaseUrl(`/error?message=${encodeURIComponent(`Il problema jumbotron non esiste`)}`))
        }
    })

    if (!problem) {
        return <></>
    }

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

    const qrCodeUrl = location.host + prependBaseUrl(`/problem/${problem.id}`)

    return (
        <>
            <main class="page-jumbotron">
                <div class="subtitle">
                    <a href="/">PHC Problemi</a>
                </div>
                <div class="row">
                    <div class="qr-code">
                        <span style={{ display: 'none' }}>{qrCodeUrl}</span>
                        <QRCode bgColor="#0000" fgColor="#111" value={qrCodeUrl} />
                    </div>
                    <div class="box">
                        <Problem {...problem} />
                    </div>
                </div>
                <div class="centered">
                    Per ora {solutions.length === 1 ? `c'è 1 soluzione` : `ci sono ${solutions.length} soluzioni`} 
                </div>
            </main>
        </>
    )
}