import { parse } from 'marked'

export interface InfoPaneConstructor {
    root: HTMLDivElement
    info: string
    id: string
    title?: string
    width?: number
    height?: number
}

export default class InfoPane {
    constructor(opts: InfoPaneConstructor) {
        const {
            title = 'About',
            width = 300,
            height = 500
        } = opts

        const draggable = document.createElement('drag-pane')
        draggable.setAttribute('heading', title)
        draggable.setAttribute('key', opts.id)

        const infoContent = document.createElement('div')
        infoContent.style.width = width + 'px'
        infoContent.style.height = height + 'px'
        infoContent.style.padding = '5px'
        infoContent.style.textAlign = 'justify'
        infoContent.style.overflowY = 'scroll'

        infoContent.innerHTML = parse(opts.info, { async: false }) as string

        draggable.appendChild(infoContent)
        opts.root.appendChild(draggable)
    }
}