import QtQuick
import Sloposk

// Replaces the keys while open. Binds straight to Settings, which persists.
Rectangle {
    id: panel

    required property Settings settings
    required property LayoutModel layoutModel

    color: Theme.background
    radius: Theme.windowRadius

    Row {
        id: columns
        readonly property real columnWidth: (width - spacing) / 2

        anchors { fill: parent; margins: 16 }
        spacing: 32

        Column {
            width: columns.columnWidth
            spacing: 4

            SectionHeader { text: qsTr("Typing") }

            ToggleRow {
                width: parent.width
                text: qsTr("Auto-Capitalization")
                detail: qsTr("Shift at the start of a sentence")
                checked: panel.settings.autoCapitalize
                onToggled: checked => panel.settings.autoCapitalize = checked
            }

            ToggleRow {
                width: parent.width
                text: qsTr("“.” Shortcut")
                detail: qsTr("Double-tap space for a period and a space")
                checked: panel.settings.doubleSpacePeriod
                onToggled: checked => panel.settings.doubleSpacePeriod = checked
            }
        }

        Column {
            width: columns.columnWidth
            spacing: 4

            SectionHeader { text: qsTr("Keys") }

            Repeater {
                // "main" is the typing keys; the rest come from the template.
                model: [{ id: "main", name: qsTr("Typing keys") }].concat(panel.layoutModel.sections)

                ToggleRow {
                    required property var modelData
                    width: parent.width
                    text: modelData.name
                    checked: panel.settings.visibleSections.includes(modelData.id)
                    onToggled: checked => panel.settings.setSectionVisible(modelData.id, checked)
                }
            }
        }
    }
}