import { Component, JSX } from 'preact'
import { StateUpdater, useEffect, useRef } from 'preact/hooks'
import { Markdown } from './Markdown'

type Props = {
    placeholder?: string
    source: string
    setSource: StateUpdater<string>
}

export const MarkdownEditor = ({ placeholder, source, setSource }: Props) => {
    placeholder ??= 'Scrivi qualcosa...'

    const editorRef = useRef<HTMLTextAreaElement>(null)

    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 instanceof HTMLTextAreaElement ? e.target.value : '')}
                    value={source}
                    cols={60}
                    ref={editorRef}
                    placeholder={placeholder}
                ></textarea>
            </div>
            <div class="preview">
                <h1>Preview</h1>
                <div class="preview-content">
                    {source.trim().length ? <Markdown source={source} /> : <div class="placeholder">{placeholder}</div>}
                </div>
            </div>
        </div>
    )
}