// Light or dark, as two desktops rather than two words.
//
// This is the control reached most often in the whole of Appearance, so it
// leads the category and it is drawn, not labelled: each card is the scheme's
// remembered theme -- yours, not the shipped default -- rendered as a bar, a
// focused window and the text on it. Choosing a side returns to whatever theme
// you last chose for that side; it never resets you to Moon or Day.

import QtQuick
import qs.config
import qs.services

Row {
    id: root

    width: parent ? parent.width : 620
    spacing: 14

    // The record the scheme would land on, which is the honest thing to show.
    // themeForScheme already falls back to the catalog default when the
    // remembered id no longer exists.
    function themeFor(scheme: string): var {
        const id = ThemeProfiles.themeForScheme(scheme);
        const record = ThemeCatalog.byId(id)
            ?? ThemeProfiles.customProfiles.find(profile => profile.id === id);
        if (record)
            return record;
        const fallback = ThemeCatalog.byId(scheme === "light"
            ? ThemeCatalog.defaultLight : ThemeCatalog.defaultDark);
        return fallback ?? { scheme: scheme, accent: Theme.accent,
            secondary: Theme.accentSecondary, palette: ThemeCatalog.defaultPalette(scheme) };
    }

    Repeater {
        model: [
            { scheme: "dark", label: "Dark" },
            { scheme: "light", label: "Light" },
        ]

        Rectangle {
            id: card

            required property var modelData

            readonly property var theme: root.themeFor(card.modelData.scheme)
            readonly property var palette: card.theme.palette
                ?? ThemeCatalog.defaultPalette(card.modelData.scheme)
            readonly property bool selected: ThemeProfiles.scheme === card.modelData.scheme

            width: (root.width - root.spacing) / 2
            implicitHeight: scene.height + caption.height + 4
            radius: Theme.cardRadius + 4
            color: Theme.alpha(Theme.fg, 0.04)
            border.width: 2
            border.color: card.activeFocus
                ? Theme.accentSecondary
                : (card.selected ? Theme.accent : Theme.alpha(Theme.fg, 0.13))
            clip: true
            activeFocusOnTab: true

            Accessible.role: Accessible.Button
            Accessible.name: card.modelData.label + " mode"
            Accessible.description: card.theme.name
                ? card.theme.name + (card.selected ? ", selected" : "")
                : ""
            Accessible.focusable: true
            Accessible.focused: card.activeFocus

            function choose(): void {
                ThemeProfiles.setScheme(card.modelData.scheme);
            }

            Keys.onReturnPressed: card.choose()
            Keys.onSpacePressed: card.choose()

            Rectangle {
                id: scene

                anchors.left: parent.left
                anchors.right: parent.right
                anchors.top: parent.top
                anchors.margins: 2
                height: 110
                color: card.palette.bg
                border.width: 0

                Column {
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.top: parent.top
                    anchors.margins: 15
                    spacing: 10

                    // The bar, edge to edge on the real desktop and so drawn
                    // wide and short here.
                    Rectangle {
                        width: parent.width * 0.6
                        height: 8
                        radius: 4
                        color: card.palette.bgDark
                        border.width: 1
                        border.color: card.palette.bgHighlight
                    }

                    Rectangle {
                        width: parent.width
                        height: 56
                        radius: 8
                        color: card.palette.bgPanel
                        border.width: 2
                        border.color: card.theme.accent

                        Column {
                            anchors.left: parent.left
                            anchors.right: parent.right
                            anchors.top: parent.top
                            anchors.margins: 9
                            spacing: 6

                            Rectangle {
                                width: parent.width * 0.6
                                height: 5
                                radius: 3
                                color: card.palette.fg
                                border.width: 0
                            }

                            Rectangle {
                                width: parent.width * 0.42
                                height: 5
                                radius: 3
                                color: card.palette.fgDim
                                border.width: 0
                            }
                        }
                    }
                }
            }

            Item {
                id: caption

                anchors.left: parent.left
                anchors.right: parent.right
                anchors.top: scene.bottom
                anchors.leftMargin: 14
                anchors.rightMargin: 12
                height: 34

                Text {
                    anchors.left: parent.left
                    anchors.right: tick.left
                    anchors.rightMargin: 6
                    anchors.verticalCenter: parent.verticalCenter
                    text: card.modelData.label
                        + (card.theme.name ? "  ·  " + card.theme.name : "")
                    color: Theme.fg
                    font.family: Theme.fontFamily
                    font.pixelSize: Theme.fontSize
                    font.weight: Font.DemiBold
                    elide: Text.ElideRight
                }

                Text {
                    id: tick
                    anchors.right: parent.right
                    anchors.verticalCenter: parent.verticalCenter
                    visible: card.selected
                    text: "✓"
                    color: Theme.accent
                    font.family: Theme.fontFamily
                    font.pixelSize: Theme.fontSize
                    font.weight: Font.DemiBold
                }
            }

            HoverHandler {
                cursorShape: Qt.PointingHandCursor
            }

            TapHandler {
                onTapped: card.choose()
            }
        }
    }
}