import * as marked from 'marked'
import {isNamedSection, MarkMark} from './types'

export class HtmlRenderer {
    public render(mm: MarkMark): string {
        let mmLines: string[] = []

        for ( const section of mm.sections ) {
            mmLines.push('<section class="markmark section">')

            // if this section has a title/description, write those out
            if ( isNamedSection(section) ) {
                mmLines.push(`<h1 class="markmark section-title">${marked.marked.parse(section.title)}</h1>`)
                if ( section.description ) {
                    mmLines.push(`<p class="markmark section-description">${marked.marked.parse(section.description)}</p>`)
                }
            }

            mmLines.push('<ul class="markmark section-list">')

            for ( const link of section.links ) {
                let linkTitle = `${link.title}`
                if ( link.tags.length ) {
                    linkTitle += `  <span class="markmark link-tags">${link.tags.map(x => '<span class="markmark link-tag">#' + x + '</span>').join(' ')}</span>`
                }

                mmLines.push(`<li class="markmark link-title">${marked.marked.parse(linkTitle)}<ul class="markmark url-list">`)

                for ( const url of link.urls ) {
                    mmLines.push(`<li class="markmark link-url"><a href="${url}" target="_blank">${url}</a></li>`)
                }

                mmLines.push('</ul></li>')
            }

            mmLines.push('</ul>')
            mmLines.push('</section>')
        }

        return mmLines.join('\n')
    }
}