/******************************************************************************
**
** Copyright (C) 2024 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
import QtQuick.VirtualKeyboard

Rectangle {
    id: root

    readonly property string boxColor: "#60101010"

    readonly property font textFieldFont: Qt.font({
        pixelSize: 40
    })

    // VKB Font Handling:
    //
    //   Buttons in virtual keyboard uses applications default font family.
    //   Can be changed in src/virtualkeyboard/qml/Internals.qml

    readonly property font fontContainingUnicodeFromTextInput: Qt.font({
        unicodeCoverage: [
            Font.UnicodeBlock_BasicLatin,
            "·√÷×½", "€£¢¥", "§™®«»“”", "␣", "ß",
            "äåãâàáÄÅÃÂÀÁ", "çċčćÇĊČĆ", "đďĐĎ", "êëèéÊËÈÉ", "ġģĝğĠĢĜĞ", "îïīĩìíÎÏĪĨÌÍ",
            "ĺŀłļľĹĿŁĻĽ", "ņńňŅŃŇ", "œøõôöòóŒØÕÔÖÒÓ", "ŕřŔŘ", "šşśŠŞŚ", "ţŧťŢŦŤ", "űūũûüùúŰŪŨÛÜÙÚ",
            "ÿýŷŸÝŶ", "žżŽŻ"
        ],
        pixelSize: 40
    })

    Flickable {
        anchors.fill: parent
        contentHeight: appLayout.implicitHeight + root.height
        contentWidth: appLayout.width
        interactive: true
        flickableDirection: Flickable.VerticalFlick

        Column {
            id: appLayout
            y: 10
            anchors.horizontalCenter: parent.horizontalCenter
            spacing: 8

            Row {
                spacing: 40
                Text {
                    id: txt1
                    height: textInput1.height
                    text: "Phone"
                    font: textFieldFont
                    Rectangle {
                        anchors.fill: parent
                        color: boxColor
                    }
                }

                TextInput {
                    id: textInput1
                    width: root.width * 0.65
                    font: fontContainingUnicodeFromTextInput
                    Rectangle {
                        anchors.fill: parent
                        color: boxColor
                    }
                    EnterKeyAction.actionId: EnterKeyAction.Next // defines how enter/accept button looks like
                    inputMethodHints: Qt.ImhDigitsOnly // predefined numeric layout is selected

                    onAccepted: {
                        textInput2.forceActiveFocus() // transfer focus to second TextInput when Enter is pressed
                    }
                    Keys.onPressed: {
                        if (event.key === Qt.Key_Tab || event.key === Qt.Key_Backtab) {
                            textInput2.forceActiveFocus()
                        }
                    }
                }
            }

            Row {
                spacing: 40
                Text {
                    id: txt2
                    height: textInput1.height
                    text: "SMS"
                    font: textFieldFont
                    Rectangle {
                        anchors.fill: parent
                        color: boxColor
                    }
                }

                TextInput {
                    id: textInput2
                    width: root.width * 0.65
                    font: fontContainingUnicodeFromTextInput
                    Rectangle {
                        anchors.fill: parent
                        color: boxColor
                    }

                    onAccepted: {
                        txt3.text = textInput2.text + "\n" + txt3.text
                        textInput2.clear()
                    }
                    Keys.onPressed: {
                        if (event.key === Qt.Key_Tab || event.key === Qt.Key_Backtab) {
                            textInput1.forceActiveFocus()
                        }
                    }
                }
            }

            Rectangle {
                width: root.width * 0.92
                anchors.horizontalCenter: parent.horizontalCenter
                height: txt3.height + 10
                color: "black"
                Rectangle {
                    width: parent.width - 2
                    height: parent.height - 2
                    color: "white"
                    anchors.centerIn: parent
                    Text {
                        id: txt3
                        text: "hello\n"
                        font: fontContainingUnicodeFromTextInput
                    }
                }
            }
        }
    }

    InputPanel { // displays keyboard when TextInput gets focus
        id: keyboard
        width: parent.width
        y: root.height - keyboard.height
        // ### The current implementation follows this rule:
        //visible: Qt.inputMethod.visible
        // ... but we need to expose 'visible' property in InputPanel API.
    }
}