import QtQuick
import qs.config
import qs.widgets

Rectangle {
    id: root

    required property var favorite
    required property string sourceName
    required property int index
    required property bool featured
    required property bool canMoveEarlier
    required property bool canMoveLater

    signal aliasCommitted(string id, string alias)
    signal removeRequested(string id)
    signal moveRequested(string id, int targetIndex)

    implicitHeight: 108
    radius: Theme.cardRadius
    color: Theme.alpha(Theme.bgDark, 0.7)
    border.width: 1
    border.color: Theme.alpha(Theme.fg, 0.07)

    PrismEdge {
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        inset: root.radius
        opacity: 0.2
    }

    Column {
        id: reorderControls
        anchors.left: parent.left
        anchors.leftMargin: 8
        anchors.verticalCenter: parent.verticalCenter
        width: 30
        spacing: 4

        SettingsButton {
            width: 30
            height: 29
            text: "↑"
            enabled: root.canMoveEarlier
            activeFocusOnTab: enabled
            onClicked: root.moveRequested(root.favorite.id, root.index - 1)
            Keys.onReturnPressed: if (enabled) root.moveRequested(root.favorite.id, root.index - 1)
            Keys.onSpacePressed: if (enabled) root.moveRequested(root.favorite.id, root.index - 1)
        }

        SettingsButton {
            width: 30
            height: 29
            text: "↓"
            enabled: root.canMoveLater
            activeFocusOnTab: enabled
            onClicked: root.moveRequested(root.favorite.id, root.index + 1)
            Keys.onReturnPressed: if (enabled) root.moveRequested(root.favorite.id, root.index + 1)
            Keys.onSpacePressed: if (enabled) root.moveRequested(root.favorite.id, root.index + 1)
        }
    }

    Rectangle {
        id: aliasFrame
        anchors.left: reorderControls.right
        anchors.leftMargin: 10
        anchors.right: removeConfirm.left
        anchors.rightMargin: 12
        anchors.top: parent.top
        anchors.topMargin: 12
        height: 34
        radius: 8
        color: Theme.alpha(Theme.fg, aliasInput.activeFocus ? 0.075 : 0.045)
        border.width: aliasInput.activeFocus ? 2 : 1
        border.color: aliasInput.activeFocus
            ? Theme.alpha(Theme.accent, 0.78)
            : Theme.alpha(Theme.fg, 0.065)

        TextInput {
            id: aliasInput
            anchors.fill: parent
            anchors.leftMargin: 10
            anchors.rightMargin: 10
            activeFocusOnTab: true
            text: String(root.favorite.alias || "")
            color: Theme.fg
            selectionColor: Theme.accent
            selectedTextColor: Theme.bgDark
            font.family: Theme.fontFamily
            font.pixelSize: Theme.fontSize
            font.weight: Font.Medium
            verticalAlignment: TextInput.AlignVCenter
            selectByMouse: true
            clip: true
            onEditingFinished: root.aliasCommitted(root.favorite.id, text)

            Text {
                anchors.fill: parent
                visible: aliasInput.text === "" && !aliasInput.activeFocus
                text: root.sourceName
                color: Theme.fgDim
                font: aliasInput.font
                verticalAlignment: Text.AlignVCenter
                elide: Text.ElideRight
            }
        }
    }

    // The line under the field says which light this is; armed, it says what
    // pressing again costs instead, because the alias only lives in this
    // favourite and there is nowhere else to read it back from.
    Text {
        anchors.left: aliasFrame.left
        anchors.right: removeConfirm.left
        anchors.rightMargin: 12
        anchors.top: aliasFrame.bottom
        anchors.topMargin: 7
        text: removeConfirm.armed
            ? "Drops it from My Home — the name you gave it goes too"
            : root.sourceName
        color: removeConfirm.armed ? Theme.danger : Theme.fgDim
        font.family: Theme.fontFamily
        font.pixelSize: Theme.fontSizeSmall
        wrapMode: removeConfirm.armed ? Text.WordWrap : Text.NoWrap
        elide: removeConfirm.armed ? Text.ElideNone : Text.ElideRight
    }

    Rectangle {
        anchors.left: aliasFrame.left
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 10
        width: badgeCopy.implicitWidth + 14
        height: 21
        radius: Theme.pillRadius
        visible: root.featured
        color: Theme.alpha(Theme.accent, 0.1)
        border.width: 1
        border.color: Theme.alpha(Theme.accent, 0.2)

        Text {
            id: badgeCopy
            anchors.centerIn: parent
            text: "Control Center"
            color: Theme.accent
            font.family: Theme.fontFamily
            font.pixelSize: 9
            font.weight: Font.DemiBold
        }
    }

    ConfirmAction {
        id: removeConfirm
        anchors.right: parent.right
        anchors.rightMargin: 11
        anchors.verticalCenter: parent.verticalCenter
        actionId: "home-favorite-remove:" + root.favorite.id
        armText: "Remove…"
        confirmText: "Remove it"
        onConfirmed: root.removeRequested(root.favorite.id)
    }
}