import QtQuick
import qs.config

// Shared hover/press surface used by every clickable thing on the panel.
//
// Content is placed at its natural size inside `holder`, which then drives the
// button's implicit size. Content must not anchor to the holder or the size
// binding becomes circular.
Rectangle {
    id: root

    property bool active: false
    property int minContentWidth: 0
    property alias acceptedButtons: mouse.acceptedButtons
    property alias containsMouse: mouse.containsMouse
    property color activeColor: Theme.surfaceActive

    default property alias content: holder.data

    // Decorations that should stretch across the whole button (underlines,
    // badges) go here instead of `content`, so they stay out of the size
    // calculation above.
    property alias overlay: overlayHolder.data

    signal clicked(var event)

    implicitWidth: Math.max(root.minContentWidth, holder.childrenRect.width) + Theme.padding * 2
    implicitHeight: holder.childrenRect.height + Theme.padding

    radius: Theme.radius
    color: root.active ? root.activeColor : mouse.containsMouse ? Theme.surfaceHover : "transparent"

    Behavior on color {
        ColorAnimation {
            duration: Theme.animDuration
            easing.type: Theme.animEasing
        }
    }

    Item {
        id: holder

        anchors.centerIn: parent
        width: childrenRect.width
        height: childrenRect.height
    }

    Item {
        id: overlayHolder

        anchors.fill: parent
    }

    MouseArea {
        id: mouse

        anchors.fill: parent
        hoverEnabled: true
        cursorShape: Qt.PointingHandCursor
        acceptedButtons: Qt.LeftButton
        onClicked: event => root.clicked(event)
    }
}