import QtQuick 2.13
import QtGraphicalEffects 1.13
import QtQuick.Controls 2.13

import utils 1.0
import shared 1.0
import shared.panels 1.0

Row {
    id: imageArea
    spacing: 0

    signal imageRemoved(int index)
    signal imageClicked(var chatImage)
    property alias imageSource: rptImages.model

    Repeater {
        id: rptImages

        Item {
            height: Style.current.halfPadding * 2 + chatImage.height + closeBtn.height / 3
            width: chatImage.width + closeBtn.width / 3

            Image {
                id: chatImage
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                width: 64
                height: 64
                fillMode: Image.PreserveAspectCrop
                mipmap: true
                smooth: false
                antialiasing: true
                source: modelData
                layer.enabled: true
                layer.effect: OpacityMask {
                    maskSource: Item {
                        width: chatImage.width
                        height: chatImage.height

                        Rectangle {
                            anchors.top: parent.top
                            anchors.left: parent.left
                            width: chatImage.width
                            height: chatImage.height
                            radius: 16
                        }
                        Rectangle {
                            anchors.bottom: parent.bottom
                            anchors.right: parent.right
                            width: 32
                            height: 32
                            radius: 4
                        }
                    }
                }
            }

            MouseArea {
                id: mouseArea
                anchors.fill: parent
                cursorShape: Qt.PointingHandCursor
                hoverEnabled: true
                onClicked: imageClicked(chatImage)
            }

            RoundButton {
                id: closeBtn
                width: 24
                height: 24
                padding: 0
                anchors.right: chatImage.right
                anchors.rightMargin: -width / 3
                anchors.top: chatImage.top
                anchors.topMargin: -height / 3
                hoverEnabled: false
                opacity: mouseArea.containsMouse || buttonMouseArea.containsMouse ? 1 : 0
                contentItem: SVGImage {
                    source: Style.svg( !buttonMouseArea.containsMouse ? "close-filled" : "close-filled-hovered")
                    width: closeBtn.width
                    height: closeBtn.height
                }
                background: Rectangle {
                    color: "transparent"
                }
                onClicked: {
                    imageArea.imageRemoved(index)
                    const tmp = imageArea.imageSource.filter((url, idx) => idx !== index)
                    rptImages.model = tmp
                }
                MouseArea {
                    id: buttonMouseArea
                    anchors.fill: parent
                    cursorShape: Qt.PointingHandCursor
                    hoverEnabled: true
                    onClicked: closeBtn.clicked()
                }
            }
        }
    }
}