import QtQuick
import Sloposk

// Toggle buttons for frequently changed key options, next to the settings button.
// Icons are built from Rectangles, so they don't depend on installed fonts.
Row {
    id: toggles

    required property Settings settings
    required property LayoutModel layoutModel

    function hasSection(id) {
        return layoutModel.sections.some(s => s.id === id);
    }

    // Shows or hides an optional template section. Not displayed if the
    // layout has no such section.
    component SectionToggle: BarToggle {
        required property string section

        visible: toggles.hasSection(section)
        checked: toggles.settings.visibleSections.includes(section)
        onToggled: checked => toggles.settings.setSectionVisible(section, checked)
    }

    // Icon: grid of small keys, optionally inside a keyboard outline.
    component KeyGrid: Item {
        id: keyGrid
        required property color color
        required property int columns
        required property int rows
        property bool framed: false

        anchors.fill: parent

        Rectangle {
            anchors.fill: parent
            visible: keyGrid.framed
            radius: 2
            color: "transparent"
            border { width: 1.5; color: keyGrid.color }
        }

        Grid {
            readonly property real key: keyGrid.framed ? 2 : 3
            anchors.centerIn: parent
            columns: keyGrid.columns
            spacing: 1
            Repeater {
                model: keyGrid.columns * keyGrid.rows
                Rectangle {
                    width: parent.key
                    height: parent.key
                    radius: 0.5
                    color: keyGrid.color
                }
            }
        }
    }

    // Icon: key outline with a text label.
    component LabelledKey: Rectangle {
        property alias label: caption.text
        property alias textColor: caption.color

        anchors.centerIn: parent
        width: 20
        height: 14
        radius: 3
        color: "transparent"
        border { width: 1.5; color: caption.color }

        Text {
            id: caption
            anchors.centerIn: parent
            font { pixelSize: 9; bold: true }
        }
    }

    BarToggle {
        id: full
        label: qsTr("Full Keyboard")
        checked: toggles.settings.fullKeyboard
        onToggled: checked => toggles.settings.fullKeyboard = checked
        KeyGrid { color: full.foreground; columns: 6; rows: 3; framed: true }
    }

    BarToggle {
        id: hold
        label: qsTr("Hold Keys")
        checked: toggles.settings.holdKeys
        onToggled: checked => toggles.settings.holdKeys = checked
        // Icon: finger pressing a key (hold-keys mode).
        Rectangle {
            anchors { horizontalCenter: parent.horizontalCenter; bottom: parent.bottom }
            width: 18
            height: 8
            radius: 2
            color: "transparent"
            border { width: 1.5; color: hold.foreground }
        }
        Rectangle {
            anchors { horizontalCenter: parent.horizontalCenter; top: parent.top; topMargin: 1 }
            width: 8
            height: 11
            radius: 4
            color: hold.foreground
        }
    }

    SectionToggle {
        id: numpad
        section: "numpad"
        label: qsTr("Numeric Keypad")
        KeyGrid { color: numpad.foreground; columns: 3; rows: 3 }
    }

    SectionToggle {
        id: navigation
        section: "navigation"
        label: qsTr("Navigation Keys")
        // Icon: arrow keys in an inverted T.
        Repeater {
            model: [[1, 0], [0, 1], [1, 1], [2, 1]]
            Rectangle {
                required property var modelData
                x: 1.5 + modelData[0] * 6
                y: 1.5 + modelData[1] * 6
                width: 5
                height: 5
                radius: 1
                color: navigation.foreground
            }
        }
    }

    SectionToggle {
        id: fn
        section: "function"
        label: qsTr("Function Keys")
        LabelledKey { label: "Fn"; textColor: fn.foreground }
    }
}