import { IContentType } from '../../ContentTypes/ContentType.interface';
import { RichText } from '../../ContentTypes/RichText/RichText';
import { Block } from '../Block'

type BulletedListItemType = { rich_text: any[], color:string }

export class BulletedListItem extends Block {
    static wrapTagName:string = 'ul'
    static tagName:string = 'li'

    toHTML(): string {
        const bulletedListItemContent:BulletedListItemType = this.content as BulletedListItemType
        const texts:RichText[] = bulletedListItemContent.rich_text.map( richTextJson => new RichText(richTextJson) )
        const color = bulletedListItemContent.color
        const classTag = ['notion', 'bulleted_list_item', color]
        const textContent:string = texts.map(item => item.toHTML()).join('')
        const beginTag = !(this.prevBlock && this.prevBlock.type === 'bulleted_list_item') ? `<${BulletedListItem.wrapTagName} class="${classTag.join(' ')}">` : ''
        const endTag = !this.nextBlock || this.nextBlock.type !== 'bulleted_list_item' ? `</${BulletedListItem.wrapTagName}>` : ''
        
        const childrenContent:string = this.children.map((childItem:IContentType) => {
            return childItem.toHTML()
        }).join('')


        return `${beginTag}<${BulletedListItem.tagName} id="${this.id}" class="${classTag.join(' ')}">${textContent}${childrenContent}</${BulletedListItem.tagName}>${endTag}`
    }   
}