import { useEffect, useRef, useState } from 'preact/hooks'
import { Markdown } from '../components/Markdown.jsx'
import { Problem } from '../components/Problem.jsx'

export const ProblemPage = ({ id }) => {
    const [source, setSource] = useState('')
    const editorRef = useRef()

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

        console.log(await res.json())
    }

    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>
            <div class="subtitle">Testo del problema</div>
            <Problem
                id={id}
                content={`Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto porro commodi cumque ratione sequi reiciendis corrupti a eius praesentium.\n\n`.repeat(
                    5
                )}
            />
            <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>
        </main>
    )
}