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

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

export class NumberedListItem extends Block {
    static wrapTagName:string = 'ol'
    static tagName:string = 'li'

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