import { createFormattingElement } from '../../../common/utils/dom';
import { getAccessibleTextColor, getAutoAvatarColor, getUserInitials, normalizeUrl } from '../../../common/utils/common';
import { ContentType } from '../../../models/enums';
import { createElement } from '@syncfusion/ej2-base';
/**
 * `Content renderer` module is used to render content in Blocks.
 *
 * @hidden
 */
var ContentRenderer = /** @class */ (function () {
    function ContentRenderer(manager) {
        this.parent = manager;
    }
    /**
     * Renders the actual content of a block.
     *
     * @param {BlockModel} block - The block model containing the content.
     * @param {HTMLElement} contentElement - The HTML element where the content will be rendered.
     * @returns {void}
     * @hidden
     */
    ContentRenderer.prototype.renderContent = function (block, contentElement) {
        var _this = this;
        if (block.content && block.content.length > 0) {
            if (contentElement) {
                contentElement.innerHTML = '';
            }
            if (block.content.length === 1) {
                var props = block.content[0].properties;
                var styles = props ? props.styles : {};
                var isEmptyStyles = !styles || Object.keys(styles).length === 0;
                var isDirectText = isEmptyStyles && block.content[0].contentType === ContentType.Text;
                this.invokeContentRenderer(block, block.content[0], contentElement, isDirectText);
            }
            else {
                block.content.forEach(function (content) {
                    _this.invokeContentRenderer(block, content, contentElement);
                });
            }
        }
        else {
            this.renderText(null, contentElement, true);
            if (contentElement) {
                contentElement.innerHTML = (!block.properties.placeholder)
                    ? '<br>'
                    : contentElement.innerHTML;
            }
        }
        this.parent.stateManager.updateManagerBlocks();
    };
    ContentRenderer.prototype.invokeContentRenderer = function (block, contentModel, contentElement, isDirectText) {
        switch (contentModel.contentType) {
            case ContentType.Text:
                this.renderText(contentModel, contentElement, isDirectText);
                break;
            case ContentType.Link:
                this.renderAnchor(contentModel, contentElement);
                break;
            case ContentType.Mention:
                this.renderMention(contentModel, contentElement);
                break;
            case ContentType.Label:
                this.renderLabel(contentModel, contentElement);
                break;
        }
        if (contentElement) {
            contentElement.innerHTML = (!block.properties.placeholder && !contentModel.content)
                ? '<br>'
                : contentElement.innerHTML;
        }
    };
    ContentRenderer.prototype.renderText = function (content, contentElement, isDirectText) {
        if (!content) {
            contentElement.textContent = '';
            return;
        }
        if (contentElement && contentElement.id) {
            contentElement.removeAttribute('id');
        }
        content.content = this.parent.serializeValue(content.content);
        if (isDirectText) {
            contentElement.id = content.id;
            contentElement.textContent = content.content;
        }
        else {
            var node = createFormattingElement(content);
            contentElement.appendChild(node);
        }
    };
    ContentRenderer.prototype.renderAnchor = function (content, contentElement) {
        var props = content.properties;
        props.url = normalizeUrl(props.url);
        content.content = this.parent.serializeValue(content.content);
        var linkData = {
            url: props.url
        };
        var formattedElement = createFormattingElement(content, linkData);
        contentElement.appendChild(formattedElement);
    };
    ContentRenderer.prototype.renderMention = function (content, contentElement) {
        var props = content.properties;
        var userModel = this.parent.users.find(function (user) { return user.id.toLowerCase() === props.userId; });
        if (!userModel) {
            return;
        }
        var name = userModel.user.trim();
        var initials = getUserInitials(name);
        var backgroundColor = userModel.avatarBgColor || getAutoAvatarColor(userModel.id);
        var avatarUrl = userModel.avatarUrl || '';
        var wrapper = createElement('div', {
            id: content.id,
            className: 'e-mention-chip e-user-chip',
            attrs: {
                'data-user-id': userModel.id,
                contenteditable: 'false'
            }
        });
        var avatar = createElement('div', {
            className: 'em-avatar',
            attrs: {
                style: "background-color: " + backgroundColor + ";"
            }
        });
        if (avatarUrl) {
            var avatarImg = createElement('img', {
                className: 'em-img',
                attrs: {
                    src: avatarUrl,
                    alt: userModel.user
                }
            });
            avatar.appendChild(avatarImg);
        }
        else {
            var initial = createElement('div', {
                className: 'em-initial'
            });
            initial.innerText = initials;
            avatar.appendChild(initial);
        }
        var userNameContent = createElement('div', {
            className: 'em-content'
        });
        userNameContent.innerText = userModel.user;
        content.content = userModel.user;
        wrapper.appendChild(avatar);
        wrapper.appendChild(userNameContent);
        contentElement.appendChild(wrapper);
    };
    ContentRenderer.prototype.renderLabel = function (content, contentElement) {
        var props = content.properties;
        var items = this.parent.labelSettings.items;
        var labelItem = items.find(function (item) { return item.id === props.labelId; });
        if (!labelItem) {
            return;
        }
        var labelChip = createElement('span', {
            id: content.id,
            className: 'e-mention-chip e-label-chip',
            styles: "background: " + labelItem.labelColor + ";color: " + getAccessibleTextColor(labelItem.labelColor) + ";",
            attrs: {
                'data-label-id': labelItem.id,
                contenteditable: 'false'
            }
        });
        labelChip.innerText = labelItem.groupBy + ": " + labelItem.text;
        content.content = labelItem.groupBy + ": " + labelItem.text;
        contentElement.appendChild(labelChip);
    };
    return ContentRenderer;
}());
export { ContentRenderer };
