app/resources/qml/MainPage/CenterContent.qml

import QtQuick 2.0
import QtQuick.Controls 2.0
import QtGraphicalEffects 1.0
import QtQuick.Layouts 1.0

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

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

Item {
    id: control

    // ----------------------------------
    // -- Start / Stop / Reset button ---
    // ----------------------------------

    GridLayout {
        id: centerLayout

        //anchors.centerIn: parent

        anchors {
            right: parent.right
            bottom: parent.bottom
        }

        width: parent.width
        height: parent.height

        columns: app.landscape() ? 2:1
        rows: app.landscape() ? 1:2

        Item {
            Rectangle {
                anchors.fill: parent
                color: "green"
            }
        }

        MainActionButton {
            id: mainActionButton


            property ScStwSetting setting: speedBackend.settings.getSetting(ScStwSettings.CompetitionModeSetting, ScStwSettings.KeyLevel)
            property double size
            startProgress: speedBackend.race.nextStartActionDetails[ScStwRace.NextStartActionDelayProgress]

            /*Connections {
                target: mainActionButton.setting

                onValueChanged: {
                    console.log("comp mode is " + mainActionButton.setting.value)
                }
            }*/


            Layout.alignment: Layout.Center

            Layout.preferredHeight: app.landscape() ? width:Math.min(centerLayout.width * size, centerLayout.height * size)
            Layout.preferredWidth: app.landscape() ? Math.min(centerLayout.width * size, centerLayout.height * size):height


            onClicked: {
                if(progressControlActivated && progress < 1.0)
                    return

                var ret;

                switch(speedBackend.race.state) {
                case ScStwRace.IDLE:
                    ret = speedBackend.race.start()
                    break;
                case ScStwRace.PREPAIRING:
                case ScStwRace.WAITING:
                case ScStwRace.STARTING:
                    ret = speedBackend.race.cancel()
                    break;
                case ScStwRace.RUNNING:
                    ret = speedBackend.race.stop()
                    break;
                case ScStwRace.STOPPED:
                case ScStwRace.INCIDENT:
                    ret = speedBackend.race.reset()
                    break;
                }

                if(ret !== 200)
                    console.log("Error executing main button action: " + ret)

                progress = 0
            }

            Behavior on size {
                NumberAnimation {
                    duration: 800
                    easing.type: Easing.InOutQuart
                }
            }
        }
    }

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

            PropertyChanges {
                target:  centerLayout

                height: app.landscape() ? control.height : Math.max(control.height, app.height * 0.4)
                width: app.landscape() ? Math.max(control.width, app.width * 0.4) : control.width
            }
        },

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

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

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

        State {
            name: ScStwRace.RUNNING
            PropertyChanges {
                target: mainActionButton
                size: 0.9
                text: "stop"
                progressControlActivated: speedBackend.scStwClient.state === ScStwClient.CONNECTED // TODO && mainActionButton.setting.value === true
            }
        },

        State {
            name: ScStwRace.STOPPED

            PropertyChanges {
                target: mainActionButton

                size: 0.5

                text: "reset"
            }

            PropertyChanges {
                target:  centerLayout

                height: app.landscape() ? control.height : Math.max(control.height, app.height * 0.4)
                width: app.landscape() ? Math.max(control.width, app.width * 0.4) : control.width
            }
        },

        State {
            name: ScStwRace.INCIDENT

            PropertyChanges {
                target: mainActionButton

                size: 0.5

                text: "reset"
            }

            PropertyChanges {
                target:  centerLayout

                height: app.landscape() ? control.height : Math.max(control.height, app.height * 0.4)
                width: app.landscape() ? Math.max(control.width, app.width * 0.4) : control.width
            }
        }

    ]

    /*


    ProgressCircle {
        id: prog

        property double progress: speedBackend.race.nextStartActionDetails[ScStwRace.NextStartActionDelayProgress]

        anchors.fill: startButt
        opacity: app.state === "STARTING" ? 1:0

        scale: startButt.scale

        lineWidth: prog.width * 0.02

        arcBegin: 0
        arcEnd: 360 * (1 - (progress > 0 ? progress:1))

        colorCircle: "grey"

        Behavior on opacity {
            NumberAnimation {
                duration: 200
            }
        }

        animationDuration: 0
    }

    FancyButton {
        id: cancelButt

        text: "cancel"
        anchors {
            right: startButt.right
            bottom: startButt.bottom
        }
        contentItem: Text {
            //make text disappear
        }
        height: startButt.height * 0.3
        scale: 0
        width: height

        enabled: app.state === "STARTING"

        onClicked: {
            app.cancel()
        }

        Behavior on scale {
            PropertyAnimation {
                duration: 200
            }
        }

        Text {
            id: cancelButt_text
            text: cancelButt.text
            anchors.centerIn: parent
            font.pixelSize: parent.height * 0.16
            font.family: "Helvetica"
            color: appTheme.theme.colors.text
        }

        backgroundColor: appTheme.theme.colors.button
    }*/

}