/******************************************************************************
**
** Copyright (C) 2020 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Quick Ultralite module.
**
** $QT_BEGIN_LICENSE:COMM$
**
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see http://www.qt.io/terms-conditions. For further
** information use the contact form at http://www.qt.io/contact-us.
**
** $QT_END_LICENSE$
**
******************************************************************************/
import QtQuick 2.0

Column {
    id: root
    width: 800
    height: 224
    spacing: 8

    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: 8
        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: 8
        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: 82
        }
    }

    Row {
        anchors.horizontalCenter: parent.horizontalCenter
        spacing: 8
        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: 8
        KeyFont20 {
            symbol: "123\n?!+"
            textColor: Style.white
            color: buttonsBackground
        }
        KeyBase {
            width: 292
            color: buttonsBackground
        }
        KeyFont36 {
            symbol: "ÄÖ"
            textColor: Style.white
            color: buttonsBackground
        }
    }
}