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

type HeadingContentType = { rich_text: any[], is_toggleable:boolean, color:string }

export class Heading_1 extends Block {
    static tagName:string = 'h1'

    toHTML(): string {
        const headingContent:HeadingContentType = this.content as HeadingContentType
        const texts:RichText[] = headingContent.rich_text.map( richTextJson => new RichText(richTextJson) )
        const toggleableTag = headingContent.is_toggleable ? 'toggle' : ''
        const color = headingContent.color
        const classTag = ['notion', color, toggleableTag]
        const textContent = texts.map(item => item.toHTML()).join('')
        const childrenContent:string = this.children.map((childItem:IContentType) => {
            return childItem.toHTML()
        }).join('')
        return `<${Heading_1.tagName} class="${classTag.join(' ')}">${textContent}${childrenContent}</${Heading_1.tagName}>`
    }   
}