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

    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 {
            id: centerExtraContentTop

            property double size

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


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

            StackView {
                id: centerExtraContentTopStack

                anchors.fill: parent
                anchors.margins: parent.width * 0.1

                property QtObject newItem: emptyComp

                onNewItemChanged: {
                    centerExtraContentTopStack.replace(newItem)
                }

                replaceEnter: Transition {
                    SequentialAnimation {
                        PauseAnimation {
                            duration: 400
                        }

                        NumberAnimation {
                            property: "opacity"
                            from: 0
                            to: 1
                            duration: 400
                            easing.type: Easing.InOutQuart
                        }
                    }
                }

                replaceExit: Transition {
                    NumberAnimation {
                        property: "opacity"
                        from: 1
                        to: 0
                        duration: 400
                        easing.type: Easing.InOutQuart
                    }
                }


                Component {
                    id: waitingDetailsComp

                    Item {

                        opacity: 0
                        scale: 0.9

                        Row {
                            anchors.fill: parent

                            spacing: centerExtraContentTopStack.anchors.margins

                            StateIndicator {
                                width: parent.width * 0.5 - parent.spacing * 0.5
                                height: parent.height

                                backgroundColor: appTheme.theme.colors.background
                                successColor: appTheme.theme.colors.success

                                state: speedBackend.race.timers[0]["readyState"] === ScStwTimer.IsReady ? "success":"warn"

                                onStateChanged: {
                                    console.log("STATE CHANGED: " + JSON.stringify( speedBackend.race.timers[0]))
                                }
                            }

                            StateIndicator {
                                width: parent.width * 0.5 - parent.spacing * 0.5
                                height: parent.height

                                backgroundColor: appTheme.theme.colors.background
                                successColor: appTheme.theme.colors.success

                                state: speedBackend.race.timers[1]["readyState"] === ScStwTimer.IsReady ? "success":"warn"
                            }
                        }
                    }
                }

                Component {
                    id: emptyComp
                    Item {}
                }

            }
        }

        MainActionButton {
            id: mainActionButton

            property double size
            startProgress: speedBackend.race.currentStartDelay["progress"]

            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.WAITING:
                    if(!speedBackend.race.readySoundEnabled && speedBackend.race.isReadyForNextState)
                        ret = speedBackend.race.start()
                    else
                        ret = speedBackend.race.cancel()
                    break;
                case ScStwRace.PREPAIRING:
                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
                }
            }
        }

        Item {
            id: centerExtraContentBottom

            property double size

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

            Behavior on size {
                NumberAnimation {
                    duration: 400
                    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: speedBackend.race.competitionMode ? 0.3:0.9
                text: speedBackend.race.readySoundEnabled ? "cancel": speedBackend.race.isReadyForNextState ? "ready":"cancel"
                progressControlActivated: speedBackend.race.competitionMode && !speedBackend.race.readySoundEnabled && !speedBackend.race.isReadyForNextState
            }

            PropertyChanges {
                target: centerExtraContentTop

                size: speedBackend.race.competitionMode ? 0.7:0
            }

            PropertyChanges {
                target: centerExtraContentBottom

                size: speedBackend.race.competitionMode ? 0.05:0
            }

            PropertyChanges {
                target: centerExtraContentTopStack

                newItem: speedBackend.race.competitionMode ? waitingDetailsComp:emptyComp
            }
        },

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

        State {
            name: ScStwRace.RUNNING
            PropertyChanges {
                target: mainActionButton
                size: 0.9
                text: speedBackend.race.competitionMode ? "cancel":"stop"
                progressControlActivated: speedBackend.race.competitionMode
            }
        },

        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
    }*/

}