import QtQuick
import qs.config

Item {
    id: root

    required property var entity
    signal addRequested(string id)

    width: parent ? parent.width : 620
    implicitHeight: 62

    Column {
        anchors.left: parent.left
        anchors.right: stateCopy.left
        anchors.rightMargin: 16
        anchors.verticalCenter: parent.verticalCenter
        spacing: 3

        Text {
            width: parent.width
            text: root.entity.sourceName
            color: Theme.fg
            font.family: Theme.fontFamily
            font.pixelSize: Theme.fontSize
            font.weight: Font.Medium
            elide: Text.ElideRight
        }

        Text {
            width: parent.width
            text: root.entity.id
            color: Theme.fgDim
            font.family: Theme.fontFamily
            font.pixelSize: Theme.fontSizeSmall
            elide: Text.ElideMiddle
        }
    }

    Text {
        id: stateCopy
        anchors.right: addButton.left
        anchors.rightMargin: 14
        anchors.verticalCenter: parent.verticalCenter
        width: 92
        text: root.entity.available === false ? "Unavailable" : String(root.entity.state || "Unknown")
        color: root.entity.available === false ? Theme.fgMuted : Theme.fgDim
        font.family: Theme.fontFamily
        font.pixelSize: Theme.fontSizeSmall
        horizontalAlignment: Text.AlignRight
        elide: Text.ElideRight
    }

    SettingsButton {
        id: addButton
        anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
        text: "Add"
        tone: "accent"
        activeFocusOnTab: true
        border.width: activeFocus ? 2 : 0
        border.color: activeFocus ? Theme.fg : Theme.alpha(Theme.fg, 0)
        onClicked: root.addRequested(root.entity.id)
        Keys.onReturnPressed: root.addRequested(root.entity.id)
        Keys.onSpacePressed: root.addRequested(root.entity.id)
    }

    Rectangle {
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        height: 1
        color: Theme.alpha(Theme.fg, 0.06)
    }
}