import QtQuick
import "../../../config" as Cfg

Rectangle {
    id: root

    property string icon: ""
    property bool enabled: true
    property bool primary: false
    signal clicked()

    property bool _hovered: false

    readonly property var t: Cfg.Config.theme

    width: primary ? 44 : 36
    height: width
    radius: width / 2

    border.width: 1
    scale: _hovered && enabled ? 1.08 : 1

    readonly property color _bgDefault: enabled
        ? (primary ? t.accent : t.mprisBtnBg)
        : "transparent"
    readonly property color _bgHovered: primary
        ? Qt.lighter(t.accent, 1.2)
        : t.mprisBtnBgHover

    color: _hovered && enabled ? _bgHovered : _bgDefault
    border.color: primary ? color : (
        enabled
            ? (_hovered ? t.mprisBtnBorderHover : t.mprisBtnBorder)
            : t.mprisBtnBorder
    )

    Behavior on color       { ColorAnimation  { duration: 150 } }
    Behavior on border.color { ColorAnimation  { duration: 150 } }
    Behavior on scale       { NumberAnimation { duration: 150; easing.type: Easing.OutBack } }

    Text {
        anchors.centerIn: parent
        text: root.icon
        color: root.primary ? root.t.mprisButtonText : (
            root.enabled
                ? (root._hovered ? root.t.mprisBtnIconHover : root.t.mprisBtnIcon)
                : root.t.mprisTextDim
        )
        font.pixelSize: primary ? 22 : 18
        font.weight: Font.Bold
        Behavior on color { ColorAnimation { duration: 150 } }
    }

    HoverHandler {
        cursorShape: root.enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
        onHoveredChanged: root._hovered = hovered
    }

    TapHandler {
        onTapped: {
            if (root.enabled) root.clicked()
        }
    }
}