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

type CodeType = { caption: any[], rich_text: any[], language: string }

export class Code extends Block {
    static wrapTagName = 'div'
    static captionTagName = 'div'
    static codeWrapTagName = 'pre'
    static codeTagName = 'code'

    toHTML(): string {
        const codeContent:CodeType = this.content as CodeType
        const classTag = ['notion', 'code', `language-${codeContent.language}`, codeContent.language]
        const captions:IContentType[] = codeContent.caption.map( captionJson => ContentTypeFactory.transformWithType((captionJson)) )
        const captionContent:string[] = captions.map(item => item.toHTML())

        const texts:RichText[] = codeContent.rich_text.map( richTextJson => new RichText(richTextJson) )
        const textContent = texts.map(item => item.toHTML()).join('').replace(/<br \/>/g, '\n')
        return `<${Code.wrapTagName} class="notion code-block" id="${this.id}"><${Code.codeWrapTagName}><${Code.codeTagName} class="${classTag.join(' ')}" >${textContent}</${Code.codeTagName}><${Code.captionTagName} class="notion caption">${captionContent.join('')}</${Code.captionTagName}></${Code.codeWrapTagName}></${Code.wrapTagName}>`
    }
}