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

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

export class Callout extends Block {
    static wrapTagName:string = 'div'
    static emojiTagName:string = 'div'
    static textWrapperTagName:string = 'div'

    toHTML(): string {
        const calloutContent:CalloutType = this.content as CalloutType
        const texts:RichText[] = calloutContent.rich_text.map( richTextJson => new RichText(richTextJson) )
        const icon:Icon = new Icon(calloutContent.icon)
        const color = calloutContent.color
        const classTag = ['notion', 'callout', color]
        const textContent = texts.map(item => item.toHTML()).join('')
        const childrenContent:string = this.children.map((childItem:IContentType) => {
            return childItem.toHTML()
        }).join('')
        return `<${Callout.wrapTagName} id="${this.id}" class="${classTag.join(' ')}">${icon.toHTML()}<div class="notion callout_context">${textContent}</div>${childrenContent}</${Callout.wrapTagName}>`
    }   
}