import QtQuick 2.3
import QtGraphicalEffects 1.13
import shared 1.0
import shared.panels 1.0

import utils 1.0

Item {
    property int verticalPadding: 0
    property int imageWidth: 350
    property bool isCurrentUser: false
    property url source
    property bool playing: Global.applicationWindow.active
    property bool isAnimated: !!source && source.toString().endsWith('.gif')
    signal clicked(var image, var mouse)
    property var container
    property alias imageAlias: imageMessage
    property bool allCornersRounded: false

    id: imageContainer
    width: loadingImage.visible ? loadingImage.width : imageMessage.width
    height: loadingImage.visible ? loadingImage.height : imageMessage.paintedHeight

    Connections {
        target: Global.applicationWindow
        onActiveChanged: {
            if (Global.applicationWindow.active === false) {
                imageMessage.playing = false
            } else {
                imageMessage.playing = Qt.binding(function () {return imageContainer.playing})
            }
        }
    }

    AnimatedImage {
        id: imageMessage
        width: sourceSize.width > imageWidth ? imageWidth : sourceSize.width
        fillMode: Image.PreserveAspectFit
        source: imageContainer.source
        playing: isAnimated

        layer.enabled: true
        layer.effect: OpacityMask {
            maskSource: Item {
                width: imageMessage.width
                height: imageMessage.height

                Rectangle {
                    anchors.top: parent.top
                    anchors.left: parent.left
                    width: imageMessage.width
                    height: imageMessage.height
                    radius: 16
                }

                Rectangle {
                    anchors.bottom: parent.bottom
                    anchors.left: parent.left
                    width: 32
                    height: 32
                    radius: 4
                    visible: !imageContainer.isCurrentUser && !allCornersRounded
                }
                Rectangle {
                    anchors.bottom: parent.bottom
                    anchors.right: parent.right
                    width: 32
                    height: 32
                    radius: 4
                    visible: imageContainer.isCurrentUser && !allCornersRounded
                }
            }
        }

        MouseArea {
            cursorShape: Qt.PointingHandCursor
            acceptedButtons: Qt.LeftButton | Qt.RightButton
            anchors.fill: parent
            onClicked: {
                if (imageContainer.isAnimated) {
                    // FIXME the ListView completely removes Items that scroll out of view
                    // so when we scroll backto the image, it gets reloaded and playing is reset
                    imageContainer.playing = !imageContainer.playing
                    return
                }
                imageContainer.clicked(imageMessage, mouse)
            }
        }
    }

    Rectangle {
        id: loadingImage
        visible: imageMessage.status === Image.Loading
                 || imageMessage.status === Image.Error
        width: parent.width
        height: width
        border.width: 1
        border.color: Style.current.border
        radius: Style.current.radius

        StyledText {
            anchors.centerIn: parent
            text: imageMessage.status === Image.Error?
                      //% "Error loading the image"
                      qsTrId("error-loading-the-image") :
                      //% "Loading image..."
                      qsTrId("loading-image---")
            color: imageMessage.status === Image.Error?
                       Style.current.red :
                       Style.current.textColor
            font.pixelSize: 15
        }
    }
}