import QtQuick
import qs.config

Item {
    id: root

    default property alias trailingData: trailing.data
    property string icon: ""
    property string label: ""
    property string detail: ""
    property string value: ""
    property bool divider: true
    property int controlWidth: 150

    // Rows are inert by default. A row that represents a choice -- picking a
    // timezone from a list, say -- opts into being clickable across its whole
    // width, which is a much larger target than the trailing control alone.
    property bool activatable: false
    signal activated

    width: parent ? parent.width : 620
    implicitHeight: Math.max(56, copy.implicitHeight + 20)

    Text {
        id: iconLabel
        anchors.left: parent.left
        anchors.verticalCenter: parent.verticalCenter
        width: root.icon === "" ? 0 : 28
        visible: root.icon !== ""
        text: root.icon
        color: Theme.accent
        font.family: Theme.fontMono
        font.pixelSize: 17
        horizontalAlignment: Text.AlignHCenter
    }

    Column {
        id: copy
        anchors.left: iconLabel.visible ? iconLabel.right : parent.left
        anchors.leftMargin: iconLabel.visible ? 10 : 0
        anchors.right: trailing.left
        anchors.rightMargin: 16
        anchors.verticalCenter: parent.verticalCenter
        spacing: 3

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

        Text {
            width: parent.width
            visible: root.detail !== ""
            text: root.detail
            color: Theme.fgDim
            font.family: Theme.fontFamily
            font.pixelSize: Theme.fontSizeSmall
            wrapMode: Text.WordWrap
        }
    }

    Item {
        id: trailing
        anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
        width: root.controlWidth
        height: 32

        Text {
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter
            visible: root.value !== ""
            text: root.value
            color: Theme.fgDim
            font.family: Theme.fontFamily
            font.features: Theme.tabularFigures
            font.pixelSize: Theme.fontSize
        }
    }

    Rectangle {
        anchors.left: copy.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        height: 1
        visible: root.divider
        color: Theme.alpha(Theme.fg, 0.065)
    }

    // Declared in this component's own body, so it is a child of the row rather
    // than of the trailing slot that `trailingData` routes external children to.
    Rectangle {
        anchors.fill: parent
        anchors.bottomMargin: 1
        radius: 8
        z: -1
        visible: root.activatable && rowHover.hovered
        color: Theme.alpha(Theme.fg, 0.05)
        border.width: 0
    }

    HoverHandler {
        id: rowHover
        enabled: root.activatable
        cursorShape: Qt.PointingHandCursor
    }

    TapHandler {
        enabled: root.activatable
        onTapped: root.activated()
    }
}
