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

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

export class Toggle extends Block {
    static tagName:string = 'details'

    toHTML(): string {
        const toggleContent:ToggleContentType = this.content as ToggleContentType
        const texts:RichText[] = toggleContent.rich_text.map( richTextJson => new RichText(richTextJson) )
        const color = toggleContent.color
        const classTag = ['notion', color]
        const textContent:string = texts.map(item => item.toHTML()).join('')

        if (Toggle.tagName !== 'details') {
            return `<${Toggle.tagName} id="${this.id}" class="${classTag.join(' ')}">${textContent}</${Toggle.tagName}>`
        }

        const childrenContent = this.children.map((childContent:IContentType) => {
            return childContent.toHTML()
        }).join('')

        return `<details id="${this.id}" class="${classTag.join(' ')}" open><summary>${textContent}</summary>${childrenContent}</details>`
    }   
}