import QtQuick
import QtQuick.Layouts
import Weave.Controls
import Weave.Templates as T

T.NotificationBanner {
    id: root

    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
                            implicitContentWidth + leftPadding + rightPadding)
    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
                             implicitContentHeight + topPadding + bottomPadding)

    borderColor: root._styleAttributes.messageContainer.borderColor
    backgroundColor: root._styleAttributes.messageContainer.backgroundColor
    iconFieldColor: root._styleAttributes.iconContainer.backgroundColor
    textColor: Theme.component.banner.messageContainer.textColor

    hoverEnabled: root.enabled

    icon {
        name: root.style === NotificationBanner.Information ? "info"
            : root.style === NotificationBanner.Success ? "complete"
            : root.style === NotificationBanner.Warning ? "alert"
            : "error"
        color: "white" // TODO: NotificationBanner-specific theme constant
        width: Theme.component.banner.icon.width
        height: Theme.component.banner.icon.height
    }

    contentItem: Item {
        implicitHeight: contentContainer.implicitHeight
        implicitWidth: contentContainer.implicitWidth

        Item {
            id: contentContainer
            // If there is only one action button, prefer slightly less padding to allow it to fit within the "normal" (48 px) height.
            // If there are multiple action buttons, use more padding as it is likely to require significantly more vertical space.
            implicitHeight: root.actionButtonsModel.count <= 1
                            ? Math.max(bannerText.implicitHeight + Theme.component.banner.messageContainer.paddingTop + Theme.component.banner.messageContainer.paddingBottom,
                                       actionsColumn.height + Theme.semantic.spacing.xs + Theme.semantic.spacing.xs)
                          : (Math.max(bannerText.implicitHeight, actionsColumn.height) + Theme.component.banner.messageContainer.paddingTop + Theme.component.banner.messageContainer.paddingBottom)
            implicitWidth: iconField.width + bannerText.implicitWidth + leftDivider.implicitWidth + actionsColumn.implicitWidth + rightDivider.implicitWidth + closeButton.implicitWidth
            height: parent.height
            width: parent.width

            Rectangle {
                id: iconField
                anchors.left: parent.left
                height: parent.height
                width: Theme.component.banner.iconContainer.width
                color: root.iconFieldColor

                T.IconImage {
                    id: iconImage
                    anchors.centerIn: parent
                    url: root.icon.source
                    name: root.icon.name
                    color: root.icon.color
                    sourceSize: Qt.size(root.icon.width, root.icon.height)
                }
            }
            Text {
                id: bannerText
                anchors {
                    verticalCenter: parent.verticalCenter
                    left: iconField.right
                    right: leftDivider.left
                    leftMargin: Theme.component.banner.messageContainer.paddingLeft
                    rightMargin: Theme.component.banner.messageContainer.paddingRight
                }
                font {
                    family: Theme.component.label.fontFamily // TODO: notification banner specific token
                    pixelSize: Theme.component.banner.messageContainer.fontSize
                    weight: Theme.component.banner.messageContainer.fontWeight
                }
                text: root.text
                wrapMode: Text.Wrap
                maximumLineCount: 3 // TODO: Theme.component.banner.maximumLineCount
                elide: Text.ElideRight
                verticalAlignment: Text.AlignVCenter
                color: root.textColor
                lineHeight: Theme.component.banner.messageContainer.lineHeight
                lineHeightMode: Text.FixedHeight

                ToolTip.visible: false
                ToolTip.text: root.text
                ToolTip.content: ToolTipContent {}

                MouseArea {
                    id: bannerTextMouseArea
                    anchors.fill: parent
                    enabled: bannerText.truncated
                    onPressAndHold: {
                        parent.ToolTip.visible = true
                        parent.ToolTip.toolTip.timeout = 0 // Display tooltip indefinitely
                        // Show the ToolTip above the banner instead of above the bannerText
                        parent.ToolTip.toolTip.y = Qt.binding(function() { return (root.y - (bannerText.y - root.y) - bannerText.ToolTip.toolTip.height) })
                    }
                    onReleased: triggerTimeout()
                    onExited: triggerTimeout()
                    onCanceled: triggerTimeout()

                    function triggerTimeout() {
                        if (parent.ToolTip.visible && parent.ToolTip.toolTip.timeout < 1500) {
                            parent.ToolTip.toolTip.timeout = 1500 // TODO: Theme.component.banner.tooltip.hideDelay
                        }
                    }
                }
            }
            Divider {
                id: leftDivider
                anchors {
                    top: parent.top
                    topMargin: Theme.semantic.spacing.s
                    bottom: parent.bottom
                    bottomMargin: Theme.semantic.spacing.s
                    right: actionsColumn.left
                }
                visible: root.dividersVisible
                rightPadding: visible ? Theme.semantic.spacing.s : 0
                orientation: Qt.Vertical
                color: root.borderColor
            }
            ColumnLayout {
                id: actionsColumn
                anchors {
                    verticalCenter: parent.verticalCenter
                    right: rightDivider.left
                }
                spacing: Theme.component.banner.child.marginLeft
                Repeater {
                    model: root.actionButtonsModel
                }
            }
            Divider {
                id: rightDivider
                anchors {
                    top: parent.top
                    topMargin: Theme.semantic.spacing.s
                    bottom: parent.bottom
                    bottomMargin: Theme.semantic.spacing.s
                    right: closeButton.left
                    rightMargin: Theme.component.banner.closeButton.marginLeft
                }
                visible: root.dividersVisible
                leftPadding: visible ? Theme.semantic.spacing.s : 0
                orientation: Qt.Vertical
                color: root.borderColor
            }
            ActionIconButton {
                id: closeButton
                anchors {
                    verticalCenter: parent.verticalCenter
                    right: parent.right
                    rightMargin: Theme.component.banner.closeButton.marginLeft
                }
                visible: root.closeVisible
                icon.name: Theme.icon.medium("close")
                onClicked: root.closeClicked()
            }
        }
    }

    background: Item {
        implicitHeight: Theme.component.banner.minHeight
        implicitWidth: Theme.component.banner.minHeight

        clip: true

        Rectangle {
            id: backgroundRect
            anchors.fill: parent
            anchors.leftMargin: -Theme.component.banner.messageContainer.borderWidth
            anchors.rightMargin: root.fullWidth ? -Theme.component.banner.messageContainer.borderWidth : 0
            color: root.backgroundColor
            border.width: Theme.component.banner.messageContainer.borderWidth
            border.color: root.borderColor
        }
    }
}