// A setting whose value is chosen from far more options than belong on screen.
//
//   PickerRow {
//       label: "Language"
//       value: SystemLocale.currentLabel
//       SearchPicker { items: SystemLocale.locales; onPicked: ... }
//   }
//
// Three pages rendered an entire dataset as rows -- every installed locale, the
// whole tz database, every mode a monitor advertises -- so the one line telling
// you what is currently set was buried under hundreds that were not. The chooser
// itself was never the problem and is unchanged: this only collapses it behind
// the current value, which is what a person came to the page to read.
//
// Collapsed by default, and closes again once something is picked, so the page
// returns to being readable rather than staying open on a list nobody needs any
// more.

import QtQuick
import qs.config

Column {
    id: root

    property string label: ""
    property string detail: ""
    // What is set right now. Shown on the collapsed row, so the common case --
    // looking rather than changing -- needs no interaction at all.
    property string value: ""
    property bool enabled: true
    property bool divider: true
    property bool expanded: false

    default property alias content: body.data

    // Pages call this from their picker's onPicked, so choosing something puts
    // the list away instead of leaving it open over the rest of the page.
    function collapse(): void { root.expanded = false; }

    width: parent ? parent.width : 620
    spacing: 0

    SettingRow {
        width: parent.width
        label: root.label
        detail: root.detail
        activatable: root.enabled
        divider: root.divider && !root.expanded
        opacity: root.enabled ? 1 : 0.5
        controlWidth: 210
        onActivated: root.expanded = !root.expanded

        Row {
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter
            spacing: 9

            Text {
                anchors.verticalCenter: parent.verticalCenter
                text: root.value
                color: Theme.fgDim
                font.family: Theme.fontFamily
                font.features: Theme.tabularFigures
                font.pixelSize: Theme.fontSize
                elide: Text.ElideRight
            }

            Text {
                anchors.verticalCenter: parent.verticalCenter
                text: root.expanded ? "▴" : "▾"
                color: Theme.fgMuted
                font.family: Theme.fontFamily
                font.pixelSize: Theme.fontSizeSmall
            }
        }
    }

    Column {
        id: body
        width: parent.width
        visible: root.expanded
    }
}