import { useContext, useEffect, useRef, useState } from 'preact/hooks'
import { Markdown } from '../components/Markdown.jsx'
import { Problem } from '../components/Problem.jsx'
import { Solution } from '../components/Solution.jsx'
import { MetadataContext, useCurrentUser, useReadResource } from '../hooks.jsx'

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

    const [user] = useCurrentUser()

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

    const [{ content }] = useReadResource(`/api/problem/${id}`, { content: '' })

    const [solutions] = useReadResource(`/api/solutions?problem=${id}`, [])

    const sendSolution = async () => {
        const res = await fetch(`/api/solution`, {
            method: 'POST',
            credentials: 'include',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                problemId: id,
                content: source,
            }),
        })

        location.reload()
    }

    useEffect(() => {
        if (editorRef.current) {
            // settare questo ad "auto" toglie l'altezza al contenitore che passa alla sua
            // dimensione minima iniziale, ciò serve per permettere all'autosize della textarea di
            // crescere e ridursi ma ha il problema che resetta lo scroll della pagina che deve
            // essere preservato a mano
            const oldScrollY = window.scrollY
            editorRef.current.style.height = 'auto'
            editorRef.current.style.height = editorRef.current.scrollHeight + 'px'
            window.scrollTo(0, oldScrollY)
        }
    }, [source])

    return (
        <main class="problem">
            <div class="logo">PHC / Problemi</div>
            {user && (
                <div class="subtitle">
                    Logged in as {user.role} @{user.username}
                </div>
            )}
            <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 => (
                            <Solution {...s} />
                        ))}
                    </div>
                </details>
            )}
            {user ? (
                <>
                    <div class="subtitle">Invia una soluzione al problema</div>
                    <div class="solution-editor">
                        <div class="editor">
                            <h1>Editor</h1>
                            <textarea
                                onInput={e => setSource(e.target.value)}
                                value={source}
                                cols="60"
                                ref={editorRef}
                                placeholder="Scrivi una nuova soluzione..."
                            ></textarea>
                        </div>
                        <div class="preview">
                            <h1>Preview</h1>
                            <div class="preview-content">
                                {source.trim().length ? (
                                    <Markdown source={source} />
                                ) : (
                                    <div class="placeholder">Scrivi una nuova soluzione...</div>
                                )}
                            </div>
                        </div>
                    </div>
                    <div class="submit-solution">
                        <button onClick={sendSolution}>Invia Soluzione</button>
                    </div>
                </>
            ) : (
                <div class="subtitle">
                    <a href="/login">Accedi</a> per inviare una soluzione
                </div>
            )}
        </main>
    )
}