import QtQuick 2.0
import QtQuick.Controls 2.0

import "../components"
import "../components/layout"

import de.itsblue.ScStw.Styling 2.0
import de.itsblue.ScStw.Styling.Components 1.0

ToolBar {
    id: control



    /*states: [
        State {
            name: ScStwRace.IDLE
            PropertyChanges {
                target: mainActionButton
                size: 0.8
                text: "start"
            }

            PropertyChanges {
                target:  centerLayout

                anchors.verticalCenterOffset: 0
                anchors.horizontalCenterOffset: 0
            }
        },

        State {
            name: ScStwRace.PREPAIRING
            PropertyChanges {
                target: mainActionButton
                size: 0.8
                text: "cancel"
            }
        },

        State {
            name: ScStwRace.WAITING
            PropertyChanges {
                target: mainActionButton
                size: 0.8
                text: "cancel"
            }
        },

        State {
            name: ScStwRace.STARTING
            PropertyChanges {
                target: mainActionButton
                size: 0.8
                text: "cancel"
            }
        },

        State {
            name: ScStwRace.STOPPED

            PropertyChanges {
                target: mainActionButton
                size: 0.75
                text: "reset"
            }

            PropertyChanges {
                target:  centerLayout

                anchors.verticalCenterOffset: app.landscape() ? 0:-centerLayout.height * 0.5
                anchors.horizontalCenterOffset: app.landscape() ? -centerLayout.width * 0.5:0
            }
        }

    ]
/*
        Text {
            id: raceStateLabel

            anchors.centerIn: parent

            opacity: ( speedBackend.race.state < ScStwRace.RUNNING ) ? 1:0

            width: parent.width * 0.7
            height: parent.height * 0.7

            text: ""

            color: appTheme.theme.colors.text

            fontSizeMode: Text.Fit

            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter

            font.pixelSize: app.landscape() ? app.width * 0.15 : app.height * 0.4

            minimumPixelSize: 1

            Behavior on text {
                FadeAnimation{
                    target: topLa
                    fadeDuration: 100
                }
            }
        }

     TimerColumn {
         id: timerColumn

            anchors.fill: parent
            anchors.topMargin: app.landscape() ? 0:parent.height * 0.1
            anchors.bottomMargin: app.landscape() ? 0:parent.height * 0.1

            timers: speedBackend.race.timers
            colors: appTheme.theme.colors
            fontName: appTheme.theme.fonts.timers
            showTimerLetter: speedBackend.race.state === ScStwRace.STOPPED


            // make text smaller for much better performance
            textScale: app.landscape() ? 0.7 : 0.5

            opacity: ( speedBackend.race.state < ScStwRace.RUNNING ) ? 0:1

            Behavior on opacity {
                NumberAnimation {
                    duration: 200
                }
            }
        }

    Item {
        id: connectionIconContainer

        anchors {
            top: parent.top
            left: parent.left
            right: parent.right
            bottom: parent.bottom
            bottomMargin: app.landscape() ? 0:parent.height * 0.8
            rightMargin: app.landscape() ? parent.width * 0.8:0
        }

        opacity: speedBackend.race.state === ScStwRace.IDLE ? 1:0

        ConnectionIcon {
            id: baseConnConnIcon

            function clientStateToString(state) {
                switch(state) {
                case ScStwClient.DISCONNECTED:
                    return "disconnected"
                case ScStwClient.CONNECTING:
                    return "connecting"
                case ScStwClient.INITIALISING:
                    return "connecting"
                case ScStwClient.CONNECTED:
                    return "connected"
                }
            }

            status: clientStateToString(speedBackend.scStwClient.state)

            source: appTheme.theme.images.baseStationIcon
            anchors {
                top: parent.top
                topMargin: 10
                left: parent.left
                leftMargin: 10
            }
            scale: 1.3
            height: !app.landscape()? parent.height*0.3:parent.width*0.3
        }

        Row {
            id: extensionStatusRow

            anchors {
                top: parent.top
                topMargin: 10
                left: baseConnConnIcon.right
                leftMargin: 1
            }

            height: baseConnConnIcon.height * 0.4
            spacing: 5

            Repeater {
                id: extensionStatusRep

                model: Object.keys(speedBackend.scStwClient.extensions)
                delegate: Rectangle {
                    property string thisLetter: modelData

                    width: height
                    height: parent.height

                    radius: width * 0.1

                    color: appTheme.theme.colors.success // TODO

                    Component.onCompleted: {
                        refreshConnectionState()
                    }

                    function refreshConnectionState() {
                        var extensions = speedBackend.scStwClient.extensions[modelData]

                        for(var i = 0; i < extensions.length; i++) {
                            console.log(JSON.stringify(extensions[i]))
                            // TODO!!
                        }
                    }

                    Text {
                        anchors.fill: parent

                        text: parent.thisLetter

                        fontSizeMode: Text.Fit
                        font.pixelSize: height
                        font.bold: true

                        color: appTheme.theme.colors.background

                        verticalAlignment: Text.AlignVCenter
                        horizontalAlignment: Text.AlignHCenter
                    }

                }
            }
        }

        Behavior on opacity {
            NumberAnimation {
                duration: 200
            }
        }

    }

    Rectangle {
        id: upper_line
        width: app.landscape() ? 1:parent.width
        height: app.landscape() ? parent.height:1
        color: appTheme.theme.colors.line
        anchors.left: app.landscape() ? topContainerItm.right:parent.left
        anchors.top: app.landscape() ? parent.top:topContainerItm.bottom
        anchors.bottom: app.landscape() ? parent.bottom:undefined
        visible: false
    }
*/
}