import io.calamares.core 1.0
import io.calamares.ui 1.0

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import "RaveOS"
import RaveOSNative 1.0

Rectangle {
    id: billentyuzet
    color: Stilus.hatter

    readonly property var layoutok: config.keyboardLayoutsModel
    readonly property string aktivKod: layoutok.currentIndex >= 0
        ? layoutok.data(layoutok.index(layoutok.currentIndex, 0), Qt.UserRole + 1) : ""
    readonly property var valtozatok: config.keyboardVariantsModel
    readonly property string valtozatKod: valtozatok.currentIndex >= 0
        ? (valtozatok.data(valtozatok.index(valtozatok.currentIndex, 0), Qt.UserRole) || "") : ""
    readonly property var sorok: Billentyuzet.gombok(aktivKod, valtozatKod)
    readonly property var behuzasok: [0, 0.5, 0.75, 0.25]
    readonly property bool kiemeles: {
        var db = 0
        for (var i = 0; i < sorok.length; ++i)
            for (var j = 0; j < sorok[i].length; ++j)
                if (sorok[i][j].length > 0 && sorok[i][j].charCodeAt(0) > 127)
                    ++db
        return db > 0 && db <= 15
    }

    component Cimke: Text {
        color: Stilus.szovegHalvany
        font.family: Stilus.font
        font.pixelSize: 12
    }

    ColumnLayout {
        anchors.fill: parent
        anchors.topMargin: 48
        anchors.bottomMargin: 32
        anchors.leftMargin: 56
        anchors.rightMargin: 56
        spacing: 24

        Fejlec {
            Layout.fillWidth: true
            felirat: qsTr("KEYBOARD")
            cim: qsTr("KEYBOARD LAYOUT")
        }

        RowLayout {
            Layout.fillWidth: true
            Layout.fillHeight: true
            spacing: 24

            ColumnLayout {
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.preferredWidth: 1
                spacing: 6

                Cimke { text: qsTr("Layout") }

                Rectangle {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    color: Stilus.felulet
                    border.width: 1
                    border.color: Stilus.keret

                    ListView {
                        id: lista
                        anchors.fill: parent
                        anchors.margins: 1
                        clip: true
                        model: billentyuzet.layoutok
                        currentIndex: billentyuzet.layoutok.currentIndex
                        boundsBehavior: Flickable.StopAtBounds
                        ScrollBar.vertical: Gorgeto {}
                        Component.onCompleted: Qt.callLater(function() { lista.positionViewAtIndex(lista.currentIndex, ListView.Center) })

                        delegate: Rectangle {
                            readonly property bool kivalasztva: index === lista.currentIndex
                            width: lista.width
                            height: 40
                            color: kivalasztva ? Stilus.zold : (hover.hovered ? Stilus.aktiv : "transparent")

                            Rectangle {
                                anchors.left: parent.left
                                anchors.right: parent.right
                                anchors.bottom: parent.bottom
                                height: 1
                                color: Stilus.aktiv
                            }

                            RowLayout {
                                anchors.fill: parent
                                anchors.leftMargin: 14
                                anchors.rightMargin: 24
                                spacing: 12

                                Text {
                                    Layout.fillWidth: true
                                    text: model.label
                                    elide: Text.ElideRight
                                    color: parent.parent.kivalasztva ? Stilus.zoldonSzoveg : Stilus.szoveg
                                    font.family: Stilus.font
                                    font.pixelSize: 14
                                    font.weight: parent.parent.kivalasztva ? Font.DemiBold : Font.Normal
                                }

                                Text {
                                    text: model.key
                                    color: parent.parent.kivalasztva ? Stilus.zoldonSzoveg : Stilus.szovegHalvany
                                    font.family: Stilus.mono
                                    font.pixelSize: 12
                                }
                            }

                            HoverHandler { id: hover }

                            TapHandler {
                                onTapped: billentyuzet.layoutok.currentIndex = index
                            }
                        }
                    }
                }
            }

            ColumnLayout {
                Layout.fillWidth: true
                Layout.alignment: Qt.AlignTop
                Layout.preferredWidth: 1
                spacing: 16

                ColumnLayout {
                    Layout.fillWidth: true
                    spacing: 6

                    Cimke { text: qsTr("Variant") }

                    Valaszto {
                        Layout.fillWidth: true
                        model: config.keyboardVariantsModel
                        textRole: "label"
                        currentIndex: config.keyboardVariantsModel.currentIndex
                        onActivated: config.keyboardVariantsModel.currentIndex = index
                    }
                }

                ColumnLayout {
                    Layout.fillWidth: true
                    spacing: 6

                    Cimke { text: qsTr("Keyboard model") }

                    Valaszto {
                        Layout.fillWidth: true
                        model: config.keyboardModelsModel
                        textRole: "label"
                        currentIndex: config.keyboardModelsModel.currentIndex
                        onActivated: config.keyboardModelsModel.currentIndex = index
                    }
                }

                ColumnLayout {
                    Layout.fillWidth: true
                    spacing: 6

                    Cimke { text: qsTr("Test") }

                    TextField {
                        Layout.fillWidth: true
                        implicitHeight: 44
                        leftPadding: 12
                        placeholderText: qsTr("Type here: árvíztűrő tükörfúrógép")
                        placeholderTextColor: Stilus.szovegHalvany
                        color: Stilus.szoveg
                        font.family: Stilus.font
                        font.pixelSize: 14
                        background: Rectangle {
                            color: Stilus.felulet
                            border.width: 1
                            border.color: parent.activeFocus ? Stilus.zold : Stilus.keretErosebb
                        }
                    }
                }
            }
        }

        Rectangle {
            id: rajzKeret
            visible: billentyuzet.sorok.length > 0
            Layout.fillWidth: true
            Layout.preferredHeight: rajz.height + 28
            color: Stilus.felulet
            border.width: 1
            border.color: Stilus.keret

            readonly property real gombKoz: 6
            readonly property real gombMeret: Math.min(52, (width - 28 - 12 * gombKoz) / 13.75)

            Column {
                id: rajz
                anchors.centerIn: parent
                spacing: rajzKeret.gombKoz

                Repeater {
                    model: billentyuzet.sorok

                    Row {
                        readonly property var gombok: modelData
                        leftPadding: billentyuzet.behuzasok[index] * (rajzKeret.gombMeret + rajzKeret.gombKoz)
                        spacing: rajzKeret.gombKoz

                        Repeater {
                            model: parent.gombok

                            Rectangle {
                                readonly property bool ekezet: billentyuzet.kiemeles && modelData.length > 0 && modelData.charCodeAt(0) > 127
                                width: rajzKeret.gombMeret
                                height: rajzKeret.gombMeret * 0.85
                                color: ekezet ? "#2f3a2c" : Stilus.hatter
                                border.width: 1
                                border.color: Stilus.keretErosebb

                                Text {
                                    anchors.centerIn: parent
                                    text: modelData
                                    color: parent.ekezet ? "#8fcf7e" : Stilus.szovegMasodlagos
                                    font.family: Stilus.mono
                                    font.pixelSize: Math.max(11, rajzKeret.gombMeret * 0.32)
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}