// Choosing a font family.
//
// Each candidate is rendered IN the font it names. A list of family names set
// in the current font tells you nothing about what you are choosing, and the
// whole point of picking a typeface is seeing it.

import QtQuick
import qs.config
import qs.modules.clipboard

Column {
    id: root

    spacing: 0

    property var families: []
    property string current: ""
    property string emptyText: "No fonts found"

    signal picked(string family)

    // Filtered rather than listing all 139: a scrolling wall of family names
    // inside a page that is already scrolling is worse than a search box.
    readonly property var matches: {
        const needle = filter.text.trim().toLowerCase();
        const list = root.families.filter(family =>
            needle === "" ? true : family.toLowerCase().indexOf(needle) >= 0);
        // Always show what is currently selected, even when it does not match.
        if (needle === "" && list.indexOf(root.current) >= 0)
            return [root.current].concat(list.filter(f => f !== root.current)).slice(0, 12);
        return list.slice(0, 12);
    }

    SearchField {
        id: filter
        width: parent.width
        placeholder: "Search installed fonts"
    }

    Repeater {
        model: root.matches

        SettingRow {
            id: candidate

            required property var modelData
            required property int index

            readonly property bool selected: candidate.modelData === root.current

            label: candidate.modelData
            detail: candidate.selected ? "Currently in use" : ""
            controlWidth: 210
            divider: candidate.index < root.matches.length - 1
            activatable: !candidate.selected
            onActivated: root.picked(candidate.modelData)

            Text {
                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter
                width: 200
                horizontalAlignment: Text.AlignRight
                elide: Text.ElideRight
                // The sample is drawn in the candidate family, which is the
                // entire reason this is a list rather than a text field.
                text: "Handgloves 0123"
                font.family: candidate.modelData
                font.pixelSize: Theme.fontSize + 1
                color: candidate.selected ? Theme.accent : Theme.fgDim
            }
        }
    }

    SettingRow {
        width: parent.width
        visible: root.matches.length === 0
        label: root.emptyText
        divider: false
    }
}