import QtQuick 2.9
import QtMultimedia 5.8
import QtQuick.Window 2.2
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0
import QtQuick.Controls.Styles 1.4
import QtQuick.Templates 2.12 as T


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

import "../components"

Column {
    id: control

    property string title: qsTr("base station")

    property bool baseConnected: speedBackend.scStwClient.state === ScStwClient.CONNECTED
    property var parentObj

    opacity: 0

    ConnectionDelegate {
        id: connectToBaseDel

        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"
            }
        }

        text: status.status === "connected" ? qsTr("disconnect"): status.status === "disconnected" ? qsTr("connect"):qsTr("connecting...")

        status: { "status": clientStateToString(speedBackend.scStwClient.state), "progress": 100 }
        connect: speedBackend.scStwClient.connectToHost
        disconnect: speedBackend.scStwClient.closeConnection
        type: "baseStation"

        width: parent.width
        height: parentObj.delegateHeight
    }

    Loader {
        id: baseStationOptionsLd

        property alias parentComp: control
        property alias baseConnected: control.baseConnected

        onBaseConnectedChanged: {
            disappearAnim.start()
        }

        Component.onCompleted: {
            baseStationOptionsLd.sourceComponent = control.baseConnected ? baseStationConnectedOptionsComp : baseStationDisconnectedOptionsComp
            item.opacity = 1
            item.scale = 1
        }

        sourceComponent: null

        ParallelAnimation {
            id: disappearAnim

            NumberAnimation {
                property: "opacity"
                to: 0
                duration: 100
                target: baseStationOptionsLd.item
            }

            NumberAnimation {
                property: "scale"
                to: 0.95
                duration: 100
                target: baseStationOptionsLd.item
            }

            onRunningChanged: {
                if(!running) {
                    baseStationOptionsLd.sourceComponent = control.baseConnected ? baseStationConnectedOptionsComp : baseStationDisconnectedOptionsComp
                    appearAnim.start()
                }
            }
        }

        ParallelAnimation {
            id: appearAnim

            NumberAnimation {
                property: "opacity"
                from: 0
                to: 1
                duration: 100
                target: baseStationOptionsLd.item
            }

            NumberAnimation {
                property: "scale"
                from: 0.95
                to: 1
                duration: 100
                target: baseStationOptionsLd.item
            }
        }

    }

    Component {
        id: baseStationDisconnectedOptionsComp

        Column {
            id: baseStationDisconnectedOptions

            width: parentComp.width

            opacity: 0      // opacity and scale are adjusted by baseStationOptionsLd
            scale: 0.95

            InputDelegate {
                id: baseStationIpDel

                text: qsTr("IP")

                inputHint: "IP"
                inputText: speedBackend.settings.readSetting(ScStwAppSettings.BaseStationIpSetting)
                inputTextFieldWidth: width * 0.7

                onInputTextChanged: {
                    speedBackend.settings.writeSetting(ScStwAppSettings.BaseStationIpSetting, inputText)
                }

                width: parent.width
                height: parentObj.delegateHeight

                visible: height > 5

                Behavior on height {
                    NumberAnimation {
                        duration: 400
                        easing.type: Easing.Linear
                    }
                }
            }

            SmoothItemDelegate {
                id: baseStationHelpDel

                width: parent.width
                height: parentObj.delegateHeight

                text: qsTr("what is this for?")

                onClicked: {
                    Qt.openUrlExternally("https://itsblue.de/index.php/speed-climbing?ref=ScStwApp")
                }
            }

        }

    }

    Component {
        id: baseStationConnectedOptionsComp

        Column {
            id: baseStationConnectedOptions

            width: parentComp.width

            Label {
                id: headerLabel

                width: parent.width
                height: parentObj.delegateHeight

                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter

                fontSizeMode: Text.Fit
                font.pixelSize: height

                minimumPixelSize: 1

                color: appTheme.theme.colors.text

                text: "ScStwBaseStation"
            }

            Label {
                id: firmwareVersionLabel

                width: parent.width
                height: parentObj.delegateHeight * 0.3


                verticalAlignment: Text.AlignTop
                horizontalAlignment: Text.AlignHCenter

                fontSizeMode: Text.Fit
                font.pixelSize: height

                minimumPixelSize: 1

                color: appTheme.theme.colors.line

                text: "Firmware: " + speedBackend.scStwClient.getFirmwareVersion() + "    API: " + speedBackend.scStwClient.getApiVersion()
            }

            SmoothSliderDelegate {
                id: baseStationVolumeDel

                property ScStwSetting setting: speedBackend.settings.getSetting(ScStwSettings.SoundVolumeSetting, ScStwSettings.KeyLevel)

                text: qsTr("volume")

                width: parent.width
                height: parentObj.delegateHeight * 0.8

                font.pixelSize: height * 0.5

                sliderValue: setting.value

                onSliderFinished: {
                    enabled = false
                    setting.value = sliderValue
                    enabled = true
                }
            }

            NextPageDelegate {
                text: qsTr("extensions")

                width: parent.width
                height: parentObj.delegateHeight * 0.8

                font.pixelSize: height * 0.5

                onClicked: {
                    parentObj.push(extensions)
                }
            }
        }
    }
}