// One line in a detail list (a wifi network, a bluetooth device, an output
// device). Icon, two lines of text, and an optional trailing slot.

import QtQuick
import Quickshell
import qs.config
import qs.widgets

Rectangle {
    id: root

    property string icon: ""
    // Used when `icon` is not in the active icon theme — several of the names
    // GNOME uses only exist in Adwaita, and iconPath() returns "" otherwise.
    property string iconFallback: "dialog-information-symbolic"
    property string label: ""
    property string sublabel: ""
    property bool selected: false
    property bool dimmed: false

    default property alias trailing: trailingRow.data

    signal clicked

    implicitHeight: 44
    radius: Theme.cardRadius - 2
    border.width: 0

    color: {
        if (root.selected)
            return Theme.alpha(Theme.accent, Theme.activeAlpha);
        if (mouse.pressed)
            return Theme.alpha(Theme.fg, Theme.activeAlpha);
        if (mouse.containsMouse)
            return Theme.alpha(Theme.fg, Theme.hoverAlpha);
        return "transparent";
    }

    Behavior on color {
        ColorAnimation {
            duration: Theme.durFast
        }
    }

    opacity: root.dimmed ? 0.5 : 1.0

    // Declared first so anything in the trailing slot stacks above it and can
    // take its own clicks (a per-row disconnect button, say).
    MouseArea {
        id: mouse
        anchors.fill: parent
        hoverEnabled: true
        cursorShape: Qt.PointingHandCursor
        onClicked: root.clicked()
    }

    ThemedIcon {
        id: leading
        anchors.left: parent.left
        anchors.leftMargin: 10
        anchors.verticalCenter: parent.verticalCenter
        size: 20
        icon: root.icon
        iconFallback: root.iconFallback
        tint: root.selected ? Theme.accent : Theme.fg
        visible: root.icon !== ""
    }

    Column {
        anchors.left: leading.visible ? leading.right : parent.left
        anchors.leftMargin: leading.visible ? 10 : 12
        anchors.right: trailingRow.left
        anchors.rightMargin: 8
        anchors.verticalCenter: parent.verticalCenter
        spacing: 1

        Text {
            width: parent.width
            text: root.label
            color: Theme.fg
            elide: Text.ElideRight
            font.family: Theme.fontFamily
            font.pixelSize: Theme.fontSize
            font.weight: root.selected ? Font.DemiBold : Font.Normal
        }

        Text {
            width: parent.width
            visible: root.sublabel !== ""
            text: root.sublabel
            color: Theme.fgDim
            elide: Text.ElideRight
            font.family: Theme.fontFamily
            font.pixelSize: Theme.fontSizeSmall
        }
    }

    // Full-height rather than vertically centered so slot contents can anchor
    // their own verticalCenter to it without a size loop.
    Row {
        id: trailingRow
        anchors.right: parent.right
        anchors.rightMargin: 10
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        spacing: 6
    }
}