import QtQuick
import Sloposk

// Replaces the keys while open, over the window's own background so
// opacity changes show live. Binds straight to Settings, which persists.
Flickable {
    id: panel

    required property Settings settings
    required property LayoutModel layoutModel
    required property Diagnostics diagnostics

    clip: true
    contentHeight: content.height + 2 * content.y
    boundsBehavior: Flickable.StopAtBounds

    Column {
        id: content
        x: 16
        y: 16
        width: panel.width - 2 * x
        spacing: 16

        ProblemList {
            width: parent.width
            problems: panel.diagnostics.problems
        }

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

            width: parent.width
            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("Hold Keys")
                    detail: qsTr("Keys stay down while touched, like a hardware keyboard; no accents or flicks")
                    checked: panel.settings.holdKeys
                    onToggled: checked => panel.settings.holdKeys = checked
                }

                ToggleRow {
                    width: parent.width
                    text: qsTr("Always Show")
                    detail: qsTr("Type into any window, not just text fields")
                    checked: panel.settings.alwaysVisible
                    onToggled: checked => panel.settings.alwaysVisible = checked
                }

                ToggleRow {
                    width: parent.width
                    text: qsTr("Shrink to Button")
                    detail: qsTr("⌨ leaves a floating button instead of hiding; tap it to bring the keyboard back")
                    checked: panel.settings.collapseToButton
                    onToggled: checked => panel.settings.collapseToButton = 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
                }

                SectionHeader { text: qsTr("Appearance"); topPadding: 12 }

                SliderRow {
                    width: parent.width
                    text: qsTr("Background")
                    from: panel.settings.minBackgroundOpacity
                    value: panel.settings.backgroundOpacity
                    onMoved: value => panel.settings.backgroundOpacity = value
                }

                ToggleRow {
                    width: parent.width
                    text: qsTr("Blur Behind")
                    detail: qsTr("Frosted glass under a see-through background, if the desktop supports it")
                    checked: panel.settings.blurBackground
                    onToggled: checked => panel.settings.blurBackground = checked
                }
            }

            Column {
                width: columns.columnWidth
                spacing: 4

                SectionHeader { text: qsTr("Keys") }

                ToggleRow {
                    width: parent.width
                    text: qsTr("Full Keyboard")
                    detail: qsTr("Number row, tab, ctrl, alt — like iPad Pro")
                    checked: panel.settings.fullKeyboard
                    onToggled: checked => panel.settings.fullKeyboard = checked
                }

                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)
                    }
                }
            }
        }
    }
}