// Choosing the desktop accent.
//
// Each swatch is drawn as the GRADIENT it will actually produce, not a flat
// dot, because the gradient is the thing being chosen -- the focused window
// border, the bar hairline and every active state are the two colours meeting.
// A row of flat circles would misrepresent all of them.
//
// Named accents rather than a colour wheel: each name carries a curated pair
// per scheme, so every choice stays legible in both light and dark. See
// config/Theme.qml for the palette and the reasoning.

import QtQuick
import qs.config
import qs.services

Flow {
    id: root

    spacing: 10

    readonly property string current: DesktopPreferences.get("accentName") || "blue"

    Repeater {
        // Object key order is insertion order here, so the palette's own order
        // is what the user sees; blue first because it is what Panama ships.
        model: Object.keys(Theme.accents)

        Column {
            id: entry

            required property var modelData

            readonly property var pair: Theme.accents[entry.modelData]
            readonly property bool selected: entry.modelData === root.current
            readonly property color start: Theme.dark ? entry.pair.dark : entry.pair.light
            readonly property color end: Theme.dark ? entry.pair.darkSecondary : entry.pair.lightSecondary

            spacing: 5

            Rectangle {
                width: 46
                height: 46
                radius: 23
                anchors.horizontalCenter: parent.horizontalCenter
                color: "transparent"
                // The ring sits outside the gradient rather than over it, so a
                // selected swatch still shows its true colours.
                border.width: entry.selected ? 2 : 1
                border.color: entry.selected ? Theme.fg : Theme.alpha(Theme.fg, 0.14)

                Rectangle {
                    anchors.fill: parent
                    anchors.margins: entry.selected ? 4 : 3
                    radius: width / 2
                    border.width: 0
                    gradient: Gradient {
                        orientation: Gradient.Horizontal
                        GradientStop { position: 0.0; color: entry.start }
                        GradientStop { position: 1.0; color: entry.end }
                    }
                }

                MouseArea {
                    anchors.fill: parent
                    cursorShape: Qt.PointingHandCursor
                    onClicked: SystemSettings.commitPreference("accentName", entry.modelData)
                }
            }

            // Always shown, not a tooltip. Telling swatches apart by colour is
            // exactly what someone with a colour vision deficiency cannot do,
            // and it is the reason the palette is named rather than freeform --
            // hiding the names behind a hover would waste that.
            Text {
                anchors.horizontalCenter: parent.horizontalCenter
                text: entry.pair.label
                color: entry.selected ? Theme.fg : Theme.fgMuted
                font.family: Theme.fontFamily
                font.pixelSize: Theme.fontSizeSmall
                font.weight: entry.selected ? Font.DemiBold : Font.Normal
            }
        }
    }
}