// The alert sound, chosen from the sound themes installed on the machine.
//
// A theme name means nothing on paper -- "freedesktop" and "Yaru" are two words
// that sound like nothing -- so the row carries a Preview beside the value and
// plays the theme that is set right now. It is the same shape as PickerRow,
// which cannot take a second trailing control.

import QtQuick
import qs.config
import qs.services

Column {
    id: root

    property bool expanded: false
    property bool divider: true

    // [{ name, directory }] -- the display name from index.theme, and the
    // directory name, which is what the gsettings key actually stores.
    readonly property var themes: SoundFeedback.themes ?? []
    readonly property string current: String(SoundFeedback.soundTheme ?? "")

    readonly property var currentTheme:
        root.themes.find(theme => String(theme.directory ?? theme.name) === root.current) ?? null
    readonly property string currentLabel: root.currentTheme
        ? String(root.currentTheme.name ?? root.currentTheme.directory)
        : root.current

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

    SettingRow {
        id: headline

        width: parent.width
        label: "Alert sound"
        detail: "Played by notifications — Panama's own included — and by applications that ask for attention"
        activatable: root.themes.length > 0
        divider: root.divider && !root.expanded
        controlWidth: Math.max(210, trailingControls.implicitWidth + 8)
        onActivated: root.expanded = !root.expanded

        Row {
            id: trailingControls

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

            SettingsButton {
                anchors.verticalCenter: parent.verticalCenter
                text: "Preview"
                enabled: !SoundFeedback.busy
                onClicked: SoundFeedback.previewAlert()
            }

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

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

    Column {
        width: parent.width
        visible: root.expanded

        Repeater {
            model: root.themes

            TextRow {
                required property var modelData
                required property int index

                readonly property string directory: String(modelData.directory ?? modelData.name)

                width: parent.width
                label: String(modelData.name ?? modelData.directory)
                value: directory === root.current ? "Current" : ""
                controlWidth: 90
                divider: index < root.themes.length - 1
                activatable: directory !== root.current
                onActivated: {
                    SoundFeedback.setSoundTheme(directory);
                    root.expanded = false;
                }
            }
        }
    }
}