import QtQuick
import qs.config

Rectangle {
    id: root

    required property var entity
    property bool busy: false
    signal activated

    implicitHeight: 72
    radius: Theme.cardRadius
    color: {
        if (root.entity.active)
            return Theme.alpha(Theme.warn, tileMouse.containsMouse ? 0.20 : 0.14);
        return Theme.alpha(Theme.fg, tileMouse.containsMouse ? 0.10 : 0.055);
    }
    border.width: 1
    border.color: root.entity.active
        ? Theme.alpha(Theme.warn, 0.20)
        : Theme.alpha(Theme.fg, 0.045)

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

    Text {
        anchors.left: parent.left
        anchors.leftMargin: 10
        anchors.top: parent.top
        anchors.topMargin: 9
        text: root.busy ? "\u{F0772}" : root.glyphFor(root.entity.domain)
        color: root.entity.active ? Theme.warn : Theme.fgDim
        font.family: Theme.fontMono
        font.pixelSize: 15
    }

    Column {
        anchors.left: parent.left
        anchors.leftMargin: 10
        anchors.right: parent.right
        anchors.rightMargin: 8
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 8
        spacing: 1

        Text {
            width: parent.width
            text: root.entity.name
            color: Theme.fg
            elide: Text.ElideRight
            font.family: Theme.fontFamily
            font.pixelSize: Theme.fontSizeSmall
            font.weight: Font.DemiBold
        }
        Text {
            width: parent.width
            text: !root.entity.available ? "Unavailable" : (root.entity.active ? "On" : "Off")
            color: root.entity.active ? Theme.warn : Theme.fgMuted
            font.family: Theme.fontFamily
            font.pixelSize: 9
        }
    }

    MouseArea {
        id: tileMouse
        anchors.fill: parent
        enabled: root.entity.available && !root.busy
        hoverEnabled: true
        cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
        onClicked: root.activated()
    }

    function glyphFor(domain: string): string {
        if (domain === "light")
            return "\u{F0335}";
        if (domain === "switch")
            return "\u{F0521}";
        if (domain === "scene")
            return "\u{F0FCE}";
        return "\u{F02DC}";
    }
}