// Where the theme you are editing came from.
//
// Editing a shipped theme forks it into a saved copy rather than changing what
// ships, so "start from" is the honest name for this row: picking a chip
// abandons the current edits and begins again from that theme. Only themes of
// the current scheme are offered -- a light theme cannot be the starting point
// for a dark one without also flipping the desktop underneath the editor.

import QtQuick
import qs.config
import qs.services

Flow {
    id: root

    width: parent ? parent.width : 620
    spacing: 8

    readonly property var themes: ThemeProfiles.profiles.filter(
        profile => profile.scheme === ThemeProfiles.scheme)

    Repeater {
        model: root.themes

        Rectangle {
            id: chip

            required property var modelData

            readonly property bool active: chip.modelData.id === ThemeProfiles.activeId

            implicitWidth: caption.implicitWidth + dot.width + 26
            implicitHeight: 26
            radius: Theme.pillRadius
            color: chip.active
                ? Theme.alpha(Theme.accent, 0.12)
                : Theme.alpha(Theme.fg, chipHover.hovered ? 0.12 : 0.06)
            border.width: chip.activeFocus || chip.active ? 2 : 1
            border.color: chip.activeFocus
                ? Theme.accentSecondary
                : (chip.active ? Theme.accent : Theme.alpha(Theme.fg, 0.1))
            activeFocusOnTab: true

            Accessible.role: Accessible.Button
            Accessible.name: "Start from " + chip.modelData.name
            Accessible.focusable: true
            Accessible.focused: chip.activeFocus

            function choose(): void {
                ThemeProfiles.selectProfile(chip.modelData.id);
            }

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

            // The gradient, not a flat dot: the pair is what the chip stands
            // for, exactly as on the accent swatches it replaces.
            Rectangle {
                id: dot

                anchors.left: parent.left
                anchors.leftMargin: 7
                anchors.verticalCenter: parent.verticalCenter
                width: 17
                height: 17
                radius: 9
                border.width: 0
                gradient: Gradient {
                    orientation: Gradient.Horizontal
                    GradientStop { position: 0.0; color: chip.modelData.accent }
                    GradientStop { position: 1.0; color: chip.modelData.secondary }
                }
            }

            Text {
                id: caption

                anchors.left: dot.right
                anchors.leftMargin: 8
                anchors.verticalCenter: parent.verticalCenter
                text: chip.modelData.name
                color: chip.active ? Theme.fg : Theme.fgDim
                font.family: Theme.fontFamily
                font.pixelSize: Theme.fontSizeSmall
                font.weight: chip.active ? Font.DemiBold : Font.Medium
            }

            HoverHandler {
                id: chipHover
                cursorShape: Qt.PointingHandCursor
            }

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