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

type TodoType = { rich_text: any[], checked: boolean, color:string }

export class Todo extends Block {
    static wrapTagName:string = 'div'

    toHTML(): string {
        const todoContent:TodoType = this.content as TodoType
        const texts:RichText[] = todoContent.rich_text.map( richTextJson => new RichText(richTextJson) )
        const checked = todoContent.checked
        const color = todoContent.color
        const classTag = ['notion', 'to_do', color]
        const textContent = texts.map(item => item.toHTML()).join('')
        const childrenContent:string = this.children.map((childItem:IContentType) => {
            return childItem.toHTML()
        }).join('')
        return `<${Todo.wrapTagName} id="${this.id}" class="${classTag.join(' ')}"><label><input type="checkbox" class="notion checkbox" disabled ${checked ? 'checked' : ''} />${textContent}${childrenContent}</label></${Todo.wrapTagName}>`
    }   
}