import QtQuick 2.12
import QtQuick.Layouts 1.12
import "../../Base"
import "../../utils.js" as Utils

HRowLayout {
    id: eventContent
    spacing: theme.spacing / 1.25
    layoutDirection: onRight ? Qt.RightToLeft: Qt.LeftToRight


    readonly property string eventText: Utils.processedEventText(model)
    readonly property string eventTime: Utils.formatTime(model.date, false)
    readonly property bool pureMedia: ! eventText && previewLinksRepeater.count

    readonly property string hoveredLink: contentLabel.hoveredLink
    readonly property bool hoveredSelectable: contentHover.hovered

    readonly property int messageBodyWidth:
        width - (avatarWrapper.visible ? avatarWrapper.width : 0) -
        totalSpacing


            TapHandler {
                enabled: debugMode
                onDoubleTapped:
                    Utils.debug(eventContent, con => { con.runJS("json()") })
            }



    Item {
        id: avatarWrapper
        opacity: collapseAvatar ? 0 : 1
        visible: ! hideAvatar

        Layout.minimumWidth: 58
        Layout.minimumHeight: collapseAvatar ? 1 : smallAvatar ? 28 : 58
        Layout.maximumWidth: Layout.minimumWidth
        Layout.maximumHeight: Layout.minimumHeight

        HUserAvatar {
            id: avatar
            userId: model.sender_id
            displayName: model.sender_name
            avatarUrl: model.sender_avatar
            width: parent.width
            height: collapseAvatar ? 1 : 58
        }
    }

    HColumnLayout {
        id: contentColumn
        Layout.alignment: Qt.AlignVCenter

        HSelectableLabel {
            id: contentLabel
            container: selectableLabelContainer
            index: model.index

            topPadding: theme.spacing / 1.75
            bottomPadding: topPadding
            leftPadding: eventContent.spacing
            rightPadding: leftPadding

            color: theme.chat.message.body
            wrapMode: TextEdit.Wrap
            textFormat: Text.RichText
            text:
                // CSS
                theme.chat.message.styleInclude +

                // Sender name
                (hideNameLine ? "" : (
                "<div class='sender'>" +
                Utils.coloredNameHtml(model.sender_name, model.sender_id) +
                "</div>")) +

                // Message body
                eventContent.eventText +

                // Time
                // For some reason, if there's only one space,
                // times will be on their own lines most of the time.
                "  " +
                "<font size=" + theme.fontSize.small +
                "px color=" + theme.chat.message.date + '>' +
                eventTime +
                "</font>" +

                // Local echo icon
                (model.is_local_echo ?
                 "&nbsp;<font size=" + theme.fontSize.small +
                 "px>⏳</font>" : "")

            transform: Translate {
                x: onRight ?
                   contentLabel.width - contentLabel.paintedWidth -
                   contentLabel.leftPadding - contentLabel.rightPadding :
                   0
            }

            Layout.maximumWidth: Math.min(
                // 600px with 16px font
                theme.fontSize.normal * 0.5 * 75,
                messageBodyWidth - leftPadding - rightPadding,
            )

            function selectAllText() {
                // Select the message body without the date or name
                container.clearSelection()
                contentLabel.select(
                    0,
                    contentLabel.length -
                    eventTime.length - 1  // - 1: separating space
                )
                contentLabel.updateContainerSelectedTexts()
            }

            HoverHandler { id: contentHover }

            Rectangle {
                width: Math.max(
                    parent.paintedWidth +
                    parent.leftPadding + parent.rightPadding,

                    previewLinksRepeater.childrenWidth +
                    (pureMedia ? 0 : parent.leftPadding + parent.rightPadding),
                )
                height: contentColumn.height
                z: -1
                color: isOwn?
                       theme.chat.message.ownBackground :
                       theme.chat.message.background
            }
        }

        HRepeater {
            id: previewLinksRepeater
            model: eventDelegate.currentItem.links

            EventMediaLoader {
                info: eventDelegate.currentItem
                mediaUrl: modelData

                Layout.bottomMargin: contentLabel.bottomPadding * multiply
                Layout.leftMargin: contentLabel.leftPadding * multiply
                Layout.rightMargin: contentLabel.rightPadding * multiply

                Layout.minimumWidth:
                    type === EventDelegate.Media.File ?
                    theme.chat.message.fileMinWidth : -1

                Layout.preferredWidth:
                    type === EventDelegate.Media.Image ?
                    (item ? item.fitSize.width : 0) :

                    type === EventDelegate.Media.Video ?
                    theme.chat.message.videoWidth :

                    type === EventDelegate.Media.Audio ?
                    theme.chat.message.audioWidth :

                    -1

                Layout.maximumWidth:
                    messageBodyWidth - Layout.leftMargin - Layout.rightMargin

                Layout.maximumHeight:
                    type === EventDelegate.Media.Image && item ?
                    Utils.fitSize(
                        Layout.maximumWidth,
                        item.fitSize.height,
                        Layout.maximumWidth
                    ).height : -1

                readonly property int multiply: pureMedia ? 0 : 1
            }
        }
    }

    HSpacer {}
}