import QtQuick 2.15
import QtQuick.Controls 2.0

FocusScope { 
    id: root
    
    signal prevClicked()
    signal nextClicked()
    
    property string fontFamily: "monospace"
    property int fontSize: 16
    property string prevText: "<"
    property string nextText: ">"
    property string text: ""
    property color textColor: "#ffffff"
    
    property color cNormalBorder     : "#222222"
    property color cNormalBackground : "#333333"
    property color cFocusBorder      : "#4c7899"
    property color cFocusBackground  : "#285577"

    Shortcut {
        sequence: "Left"
        onActivated: {
            prevClicked()
        }    
    }

    Shortcut {
        sequence: "Right"
        onActivated: {
            nextClicked()
        }
    }

    Rectangle {
        id: main

        anchors.fill: root

        color: cNormalBackground
        border.color: cNormalBorder
        border.width: 1

        states: [
            State {
                name: "focus"
                when: root.activeFocus
                PropertyChanges {
                    target: main
                    color: cFocusBackground
                    border.color: cFocusBorder
                    border.width: 1
                }
            }
        ]

        MouseArea {
            anchors.fill: parent
            onClicked: {
                root.focus = true;
            }
        }

        Text {
            id: sessionName
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            font.pixelSize: root.fontSize
            font.family: root.fontFamily
            color: textColor
            text: root.text
            anchors {
                horizontalCenter: parent.horizontalCenter
                verticalCenter: parent.verticalCenter
            }
        }

        Text {
            id: prevButton
            text: root.prevText
            color: textColor
            font.pixelSize: root.fontSize
            font.family: root.fontFamily
            anchors {
                left: parent.left
                verticalCenter: parent.verticalCenter
                rightMargin: 10
                leftMargin: 8
            }
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    root.prevClicked();
                    root.focus = true;
                }
            }
        }

        Text {
            id: nextButton
            text: root.nextText
            color: textColor
            font.pixelSize: root.fontSize
            font.family: "monospace"
            anchors {
                right: parent.right
                verticalCenter: parent.verticalCenter
                leftMargin: 10
                rightMargin: 8
            }
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    root.nextClicked();
                    root.focus = true;
                }
            }
        }
    }
}