//Import the declarative plugins
import QtQuick 2.0
import QtQuick.Layouts 1.3
import QtQuick.Dialogs 1.2

//Implementation of the Button control.
Rectangle {
    id: button
    color: "#ffffff"
    property string text
    property alias source: backgroundImage.source
    signal clicked
    property bool hovered
    anchors.margins: 0

    ColumnLayout {
        id: column
        spacing: -5
        anchors.fill: parent
        Image {
            id: backgroundImage
            smooth: true
            fillMode: Image.PreserveAspectFit
            source: ""
            Layout.preferredHeight: column.height / 3 * 2
            Layout.alignment: Qt.AlignCenter
        }

        Rectangle {
            color: "#80808080"
            Layout.fillWidth: true
            Layout.preferredHeight: column.height - backgroundImage.height - column.spacing
        }
    }

    MouseArea {
        anchors.fill: button
        onClicked: { button.clicked(); messageDialog.open() }
        hoverEnabled: true
        onEntered: button.hovered = true
        onExited: button.hovered = false
    }

    MessageDialog {
        id: messageDialog
        title: "column.spacing !!!!"
        text: qsTr("column.spacing !!!! %1").arg(column.spacing)
        onAccepted: {
            close()
        }
    }
}