// The identity of the display everything below it belongs to.
//
// A card title would say the same words in the same place, but this panel has
// to carry four facts at once -- which display, on which connector, what it is
// showing right now, and whether Panama is overriding it -- and a title with a
// subtitle can only carry two of them.

import QtQuick
import QtQuick.Controls
import qs.config

Item {
    id: root

    property string title: ""
    property string connector: ""
    property string meta: ""
    property bool overridden: false
    property bool enabled: true

    signal forgetRequested

    width: parent ? parent.width : 620
    implicitHeight: Math.max(44, copy.implicitHeight) + 14

    // A screen on a stand. Drawn rather than iconified: no symbolic icon in the
    // set reads as "this particular display" beside its own name.
    Rectangle {
        id: glyph

        anchors.left: parent.left
        anchors.top: parent.top
        anchors.topMargin: 2
        width: 44
        height: 33
        radius: 7
        border.width: 1
        border.color: Theme.alpha(Theme.fg, 0.3)

        gradient: Gradient {
            orientation: Gradient.Horizontal
            GradientStop { position: 0.0; color: Theme.alpha(Theme.accent, 0.45) }
            GradientStop { position: 1.0; color: Theme.alpha(Theme.accentSecondary, 0.35) }
        }

        Rectangle {
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.bottom
            anchors.topMargin: 2
            width: 16
            height: 3
            radius: 2
            border.width: 0
            color: Theme.alpha(Theme.fg, 0.25)
        }
    }

    Column {
        id: copy

        anchors.left: glyph.right
        anchors.leftMargin: 13
        anchors.right: actions.left
        anchors.rightMargin: 12
        anchors.top: parent.top
        spacing: 3

        Row {
            width: parent.width
            spacing: 8

            Text {
                anchors.verticalCenter: parent.verticalCenter
                width: Math.max(0, parent.width - (connectorChip.visible ? connectorChip.width + 8 : 0))
                text: root.title
                color: Theme.fg
                font.family: Theme.fontFamily
                font.pixelSize: Theme.fontSizeLarge
                font.weight: Font.DemiBold
                elide: Text.ElideRight
            }

            Rectangle {
                id: connectorChip

                anchors.verticalCenter: parent.verticalCenter
                visible: root.connector !== ""
                width: visible ? connectorLabel.implicitWidth + 16 : 0
                height: 19
                radius: Theme.pillRadius
                color: Theme.alpha(Theme.fg, 0.08)
                border.width: 1
                border.color: Theme.alpha(Theme.fg, 0.12)

                Text {
                    id: connectorLabel
                    anchors.centerIn: parent
                    text: root.connector
                    color: Theme.fgDim
                    font.family: Theme.fontFamily
                    font.pixelSize: Math.max(9, Theme.fontSizeSmall - 1)
                    font.weight: Font.DemiBold
                }
            }
        }

        // Armed, this line stops reporting the current mode and names what
        // forgetting costs. The consequence used to live in a 400ms tooltip on
        // the pill, which is not where someone about to press Forget is
        // looking.
        Text {
            width: parent.width
            visible: root.meta !== "" || forget.armed
            text: forget.armed
                ? "Resolution, refresh rate, scale, rotation and color go back to what Panama picks automatically."
                : root.meta
            color: Theme.fgDim
            font.family: Theme.fontFamily
            font.features: Theme.tabularFigures
            font.pixelSize: Theme.fontSizeSmall
            wrapMode: forget.armed ? Text.WordWrap : Text.NoWrap
            elide: forget.armed ? Text.ElideNone : Text.ElideRight
        }
    }

    Row {
        id: actions

        anchors.right: parent.right
        anchors.top: parent.top
        anchors.topMargin: 4
        spacing: 8

        Rectangle {
            id: customPill

            anchors.verticalCenter: parent.verticalCenter
            visible: root.overridden
            width: visible ? customLabel.implicitWidth + 20 : 0
            height: 24
            radius: Theme.pillRadius
            color: Theme.alpha(Theme.accent, 0.1)
            border.width: 1
            border.color: Theme.alpha(Theme.accent, 0.25)

            // The pill says what the state IS. What Forget costs is said by
            // the header line while Forget is armed, not hidden in here.
            ToolTip.visible: customHover.hovered
            ToolTip.delay: 400
            ToolTip.text: "This display uses a setting you chose, not the one Panama picks automatically."

            Text {
                id: customLabel
                anchors.centerIn: parent
                text: "Custom setting"
                color: Theme.accentAlt
                font.family: Theme.fontFamily
                font.pixelSize: Math.max(9, Theme.fontSizeSmall - 1)
                font.weight: Font.DemiBold
            }

            HoverHandler { id: customHover }
        }

        ConfirmAction {
            id: forget

            anchors.verticalCenter: parent.verticalCenter
            visible: root.overridden
            width: visible ? implicitWidth : 0
            actionId: "forget-display:" + root.connector
            armText: "Forget…"
            confirmText: "Forget it"
            enabled: root.enabled
            onConfirmed: root.forgetRequested()
        }
    }
}