import { ContentType } from "../ContentType";
import { IContentType } from "../ContentType.interface";

export type TextAnnotationsType = {
    bold: boolean,
    italic: boolean,
    strikethrough: boolean,
    underline: boolean,
    code: boolean,
    color: string
}

export class RichText extends ContentType implements IContentType {
    readonly content: string
    // TODO: need to implment for link content.
    readonly link: unknown
    readonly annotations: TextAnnotationsType
    readonly plainText: string
    // TODO: need to implment for href content.
    readonly href: unknown

    constructor(richTextJson: any) {
        super(richTextJson)
        this.plainText = richTextJson['plain_text']
        this.content = richTextJson[this.type]['content'] || this.plainText
        this.link = richTextJson[this.type]['link'] || null
        this.annotations = richTextJson['annotations'] || {
            "bold": false,
            "italic": false,
            "strikethrough": false,
            "underline": false,
            "code": false,
            "color": "default"
        }
        this.href = richTextJson['href']
    }

    toHTML(): string {
        const filterAnnotionData: { [key: string]: boolean | string } = this.annotations
        const annotationTags: string[] = Object.keys(this.annotations).filter((itemKey: string) => !!filterAnnotionData[itemKey]).map(itemKey => {
            const rawValue: unknown = filterAnnotionData[itemKey]
            if (typeof rawValue === 'string') {
                return rawValue
            }
            return itemKey

        })
        const classTags = ['notion', 'rich_text', ...annotationTags,]
        const isMarkContext = this.annotations['code']
        const textContentWithSpecialCharacters = this.type === 'mention' ?  `<span class="notion mention">${this.plainText.replace(/ /g, '_')}</span>` : this.plainText
        const textContent = textContentWithSpecialCharacters.replace(/\n/g, '<br />')
        return `<span class="${classTags.join(' ')}">${isMarkContext ? `<mark>${textContent}</mark>` : textContent}</span>`
    }
}