import QtQuick 2.9
import QtQuick.Controls 2.4

Item {
    id: root
    width: 90
    height: 30
    signal accepted
    property string keyName
    property string text: "Binded: "+keyName
    property bool isListening: false
    property color fontColor1: "#000000"
    property color fontColor2: "#9B1B03"
    function askForKey(){
        if(!root.isListening){
            txt.text = "Press Key"
        }
        root.isListening = true
        root.focus = true
    }
    Timer {
        id: focusTimer
        interval: 500; running: root.focus; repeat: true
        onTriggered: {
            if(txt.color == root.fontColor1){
                txt.color = root.fontColor2
            }else{
                txt.color = root.fontColor1
            }
        }
    }

    Keys.onPressed: {
        if(root.isListening){
            switch(event.key){
            case 16777251:
                root.keyName="ALT";
                break;
            case 16777264:
                root.keyName="F1";
                break;
            case 16777265:
                root.keyName="F2";
                break;
            case 16777266:
                root.keyName="F3";
                break;
            case 16777267:
                root.keyName="F4";
                break;
            case 16777268:
                root.keyName="F5";
                break;
            case 16777269:
                root.keyName="F6";
                break;
            case 16777270:
                root.keyName="F7";
                break;
            case 16777271:
                root.keyName="F8";
                break;
            case 16777272:
                root.keyName="F9";
                break;
            case 16777273:
                root.keyName="F10";
                break;
            case 16777274:
                root.keyName="F11";
                break;
            case 16777275:
                root.keyName="F12";
                break;
            case 32:
                root.keyName="SPACE";
                break;
            case 16777234:
                root.keyName="←";
                break;
            case 16777235:
                root.keyName="↑";
                break;
            case 16777236:
                root.keyName="→";
                break;
            case 16777237:
                root.keyName="↓";
                break;
            default:
                root.keyName=event.text.toUpperCase();
                break;
            }
            txt.text = "Binded: "+root.keyName
            root.isListening = false
            root.focus = false
            txt.color = root.fontColor1
            root.accepted()
        }
    }
    FontLoader {
        id: roboto
        source: "../assets/fonts/AdobeClean-Regular.ttf"
    }

    Rectangle {
        id: rectangle
        color: "#d1d1d1"
        anchors.fill: parent

        Text {
            id: txt
            width: root.width
            font.family: roboto.name
            height: root.height
            color: root.fontColor1
            text: root.text
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            font.pixelSize: 12
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
        }
    }
    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onEntered: {
            if(!root.focus){
                txt.color = root.fontColor2
            }
        }
        onExited: {
            if(!root.focus){
                txt.color = root.fontColor1
            }
        }
        onClicked: {
            root.askForKey()
        }
    }
}