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

export const MarkdownEditor = ({ source, setSource }) => {
    const editorRef = useRef()

    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 (
        <div class="markdown-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>
    )
}