// A pill-shaped button, for the places a row's trailing slot needs several
// small targets rather than one.
//
// Two of them exist on the Applications page and they want the same shape: the
// catalog's category filter, where one chip is active and the rest are not, and
// the per-application "elsewhere in Settings" links, where none is. `active`
// covers the first case; leaving it false gives the second.
//
// SettingsButton stays the control for a row's primary action -- it is taller,
// squarer, and reads as a button. A chip reads as a tag you can press.

import QtQuick
import qs.config

Rectangle {
    id: root

    property string text: ""
    property bool active: false

    signal clicked

    implicitWidth: caption.implicitWidth + 22
    implicitHeight: 26
    radius: Theme.pillRadius
    opacity: root.enabled ? 1 : 0.45
    color: root.active
        ? Theme.alpha(Theme.accent, 0.14)
        : Theme.alpha(Theme.fg, chipHover.hovered ? 0.12 : 0.055)
    border.width: root.activeFocus || root.active ? 2 : 1
    border.color: root.activeFocus
        ? Theme.accentSecondary
        : (root.active ? Theme.alpha(Theme.accent, 0.5) : Theme.alpha(Theme.fg, 0.1))
    activeFocusOnTab: root.enabled

    Accessible.role: Accessible.Button
    Accessible.name: root.text
    Accessible.focusable: root.enabled
    Accessible.focused: root.activeFocus
    Accessible.onPressAction: root.clicked()

    Keys.onReturnPressed: root.clicked()
    Keys.onSpacePressed: root.clicked()

    Text {
        id: caption

        anchors.centerIn: parent
        text: root.text
        color: root.active ? Theme.fg : Theme.fgDim
        font.family: Theme.fontFamily
        font.pixelSize: Theme.fontSizeSmall
        font.weight: Font.Medium
    }

    HoverHandler {
        id: chipHover
        cursorShape: Qt.PointingHandCursor
    }

    TapHandler {
        onTapped: root.clicked()
    }
}