// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial
import QtQuick 2.0

Column {
    id: root
    width: 1200
    height: 336
    spacing: 12

    property bool isDayMode: false
    property color buttonsBackground: isDayMode ? Style.keyboardGray : Style.keyboardBlue
    property color activeButtonsBackground: isDayMode ? Style.keyboardBlue : Style.keyboardGray
    property color backspaceBackground: isDayMode ? Style.backspaceGray : Style.backspaceBlue
    property color returnBackground: isDayMode ? Style.returnGray : Style.returnBlue

    property string activeKey: ""
    function setActiveKey(symbol: string) {
        activeKey = symbol
    }

    Row {
        anchors.horizontalCenter: parent.horizontalCenter
        spacing: 12
        Repeater {
            model: [ "Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P" ]
            delegate: KeyFont36 {
                symbol: modelData
                textColor: Style.white
                color:  modelData === activeKey ? activeButtonsBackground : buttonsBackground
            }
        }

        KeyWithImage {
            source: "qrc:///images/keyboard/backspace-key.png"
            color: backspaceBackground
        }
    }

    Row {
        anchors.horizontalCenter: parent.horizontalCenter
        spacing: 12
        Repeater {
            model: [ "A", "S", "D", "F", "G", "H", "J", "K", "L" ]
            delegate: KeyFont36 {
                symbol: modelData
                textColor: Style.white
                color:  modelData === activeKey ? activeButtonsBackground : buttonsBackground
            }
        }

        KeyWithImage {
            source: "qrc:///images/keyboard/enter-key.png"
            color: returnBackground
            width: 123
        }
    }

    Row {
        anchors.horizontalCenter: parent.horizontalCenter
        spacing: 12
        Repeater {
            model: [ "Z", "X", "C", "V", "B", "N", "M", ",", "." ]
            delegate: KeyFont36 {
                symbol: modelData
                textColor: Style.white
                color:  modelData === activeKey ? activeButtonsBackground : buttonsBackground
            }
        }
    }

    Row {
        anchors.horizontalCenter: parent.horizontalCenter
        spacing: 12
        KeyFont20 {
            symbol: "123\n?!+"
            textColor: Style.white
            color: buttonsBackground
        }
        KeyBase {
            width: 438
            color: buttonsBackground
        }
        KeyFont36 {
            symbol: "ÄÖ"
            textColor: Style.white
            color: buttonsBackground
        }
    }
}