import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Item {
    id: root

    property var settings
    property var theme
    property var notificationCenter
    implicitHeight: pageColumn.implicitHeight

    ColumnLayout {
        id: pageColumn
        width: parent.width
        spacing: 10

        SettingsCard {
            theme: root.theme
            title: "Notifications"
            description: root.notificationCenter ? root.notificationCenter.count + " tracked notifications" : "Notification service"
            Layout.fillWidth: true
            SettingsRow {
                theme: root.theme
                label: "Bar badge"
                CCSwitch {
                    theme: root.theme
                    checked: root.settings.notificationBadge
                    onToggled: root.settings.notificationBadge = checked
                }
            }
            SettingsRow {
                theme: root.theme
                label: "Popup position"
                ComboBox {
                    palette.base: root.theme.surfaceVariant
                    palette.button: root.theme.surfaceVariant
                    palette.text: root.theme.text
                    palette.buttonText: root.theme.text
                    palette.highlight: root.theme.primary
                    model: ["Top right", "Top left"]
                    currentIndex: root.settings.notificationPosition === "top-left" ? 1 : 0
                    onActivated: root.settings.notificationPosition = currentIndex === 1 ? "top-left" : "top-right"
                }
            }
            SettingsRow {
                theme: root.theme
                label: "Popup duration"
                SpinBox {
                    palette.base: root.theme.surfaceVariant
                    palette.text: root.theme.text
                    palette.button: root.theme.surfaceVariant
                    palette.buttonText: root.theme.text
                    from: 1000
                    to: 15000
                    stepSize: 500
                    value: root.settings.notificationPopupDuration
                    editable: true
                    onValueModified: root.settings.notificationPopupDuration = value
                }
                Label { text: "ms"; color: root.theme.mutedText }
            }
        }

        SettingsCard {
            theme: root.theme
            title: "Current queue"
            description: "Click the bar badge to open the existing notification center."
            Layout.fillWidth: true
            CCButton {
                theme: root.theme
                text: "Open notifications"
                accent: true
                onClicked: if (root.notificationCenter) root.notificationCenter.open = !root.notificationCenter.open
            }
        }
    }
}