// A GNOME-style quick-settings tile: big rounded button with an icon and a
// label, filled with the accent colour when active.

import QtQuick
import Quickshell
import Quickshell.Widgets
import qs.config

Rectangle {
    id: root

    property string icon: ""        // freedesktop icon name
    property string label: ""
    property string sublabel: ""
    property bool active: false
    property bool enabled: true

    signal toggled
    // Emitted on right-click / long press — used to open the relevant detail
    // panel (pick a wifi network, pick an output device).
    signal expanded

    implicitWidth: 168
    implicitHeight: 56
    radius: Theme.cardRadius
    border.width: 0

    opacity: enabled ? 1.0 : 0.45

    color: {
        if (root.active)
            return mouse.containsMouse ? Qt.lighter(Theme.accent, 1.12) : Theme.accent;
        if (mouse.pressed)
            return Theme.alpha(Theme.fg, Theme.activeAlpha);
        if (mouse.containsMouse)
            return Theme.alpha(Theme.fg, Theme.hoverAlpha);
        return Theme.alpha(Theme.fg, 0.07);
    }

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

    readonly property color contentColor: root.active ? Theme.bgDark : Theme.fg

    Row {
        anchors.fill: parent
        anchors.leftMargin: 12
        anchors.rightMargin: 12
        spacing: 10

        // ThemedIcon, not a bare IconImage: Adwaita's symbolic SVGs carry a
        // hardcoded #2e3436 fill and Qt does not recolour them the way GTK
        // does, so drawn directly they are all but invisible on this palette.
        ThemedIcon {
            anchors.verticalCenter: parent.verticalCenter
            size: 22
            icon: root.icon
            tint: root.contentColor
            visible: root.icon !== ""
        }

        Column {
            anchors.verticalCenter: parent.verticalCenter
            spacing: 1

            Text {
                text: root.label
                color: root.contentColor
                font.family: Theme.fontFamily
                font.pixelSize: Theme.fontSize
                font.weight: Font.Medium
                elide: Text.ElideRight
                width: Math.min(implicitWidth, 108)
            }

            Text {
                text: root.sublabel
                visible: root.sublabel !== ""
                color: root.active ? Theme.alpha(Theme.bgDark, 0.7) : Theme.fgDim
                font.family: Theme.fontFamily
                font.pixelSize: Theme.fontSizeSmall
                elide: Text.ElideRight
                width: Math.min(implicitWidth, 108)
            }
        }
    }

    MouseArea {
        id: mouse
        anchors.fill: parent
        enabled: root.enabled
        hoverEnabled: true
        acceptedButtons: Qt.LeftButton | Qt.RightButton
        cursorShape: Qt.PointingHandCursor
        onClicked: event => {
            if (event.button === Qt.RightButton)
                root.expanded();
            else
                root.toggled();
        }
    }
}