import QtQuick

import qs.config
import qs.services
import qs.widgets

Column {
    id: root

    property string mode: DesktopPreferences.get("wallpaperMode")
    property var outputs: Wallpaper.outputNames()
    property string selectedOutput: root.outputs.length > 0 ? root.outputs[0] : ""

    property var setModeAction: function(mode) { Wallpaper.setMode(mode); }
    property var setIntervalAction: function(minutes) { Wallpaper.setIntervalMinutes(minutes); }
    property var setShuffleAction: function(enabled) { Wallpaper.setShuffle(enabled); }

    width: parent ? parent.width : 620
    spacing: 4

    ChoiceGrid {
        width: parent.width
        label: "Wallpaper mode"
        detail: "Use one image, rotate a collection, or choose per display"
        options: PreferenceSchema.spec("wallpaperMode").options
        current: root.mode
        onPicked: value => root.setModeAction(value)
    }

    ChoiceGrid {
        visible: root.mode === "per-monitor"
        width: parent.width
        label: "Display"
        detail: "Choose which display the thumbnail grid assigns"
        options: root.outputs.map(output => ({ value: output, label: output }))
        current: root.selectedOutput
        onPicked: value => root.selectedOutput = value
    }

    SettingRow {
        visible: root.mode === "slideshow"
        label: "Change background every"
        detail: "Time between slideshow images"
        controlWidth: 280

        Item {
            anchors.fill: parent

            ValueSlider {
                anchors.left: parent.left
                anchors.right: intervalText.left
                anchors.rightMargin: 10
                anchors.verticalCenter: parent.verticalCenter
                value: (DesktopPreferences.get("wallpaperIntervalMinutes") - 5) / 1435
                onMoved: ratio => {
                    const raw = 5 + ratio * 1435;
                    root.setIntervalAction(Math.max(5, Math.min(1440, Math.round(raw / 5) * 5)));
                }
            }

            Text {
                id: intervalText
                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter
                width: 62
                text: DesktopPreferences.get("wallpaperIntervalMinutes") + " min"
                color: Theme.fgDim
                font.family: Theme.fontMono
                font.features: Theme.tabularFigures
                font.pixelSize: Theme.fontSizeSmall
                horizontalAlignment: Text.AlignRight
            }
        }
    }

    SettingRow {
        visible: root.mode === "slideshow"
        label: "Shuffle"
        detail: "Show every selected image before repeating"
        divider: false
        controlWidth: 48

        SettingsToggle {
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter
            checked: DesktopPreferences.get("wallpaperShuffle") === true
            onToggled: enabled => root.setShuffleAction(enabled)
        }
    }

    Text {
        width: parent.width
        visible: root.mode === "slideshow"
            && (DesktopPreferences.get("wallpaperSlideshowPaths") ?? []).length === 0
        text: "Select two or more images below to begin a slideshow."
        color: Theme.fgDim
        font.family: Theme.fontFamily
        font.pixelSize: Theme.fontSizeSmall
        horizontalAlignment: Text.AlignHCenter
        topPadding: 5
        bottomPadding: 8
    }
}