import QtQuick 2.9
import QtMultimedia 5.8
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0
import QtQuick.Controls.Styles 1.4
import "../components"

ListView {
    id: control

    property int delegateHeight: 40
    property color backgroundColor: "transparent"

    spacing: control.delegateHeight * 0.3
    boundsBehavior: Flickable.StopAtBounds

    clip: true

    model: Object.keys(speedBackend.scStwClient.extensions)

    header: Rectangle {
        // for top spacing
        width: parent.width
        height: control.spacing
        color: control.backgroundColor
    }

    delegate: Rectangle {
        id: laneContainerRect

        property string thisLane: modelData

        anchors.horizontalCenter: parent.horizontalCenter

        width: parent.width * 0.98
        height: control.delegateHeight * extensionsList.model

        radius: width * 0.05

        border.width: 1
        border.color: appTheme.theme.colors.line

        color: control.backgroundColor

        Rectangle {
            id: laneLabelRect

            anchors {
                left: parent.left
                leftMargin: parent.radius * 1
                verticalCenter: parent.top
            }

            height: control.delegateHeight * 0.5
            width: laneLabel.font.pixelSize * 4

            color: control.backgroundColor

            Label {
                id: laneLabel

                height: parent.height
                width: parent.width

                leftPadding: laneContainerRect.width * 0.02
                rightPadding: laneContainerRect.width * 0.02

                horizontalAlignment: Text.AlignHCenter
                verticalAlignment:  Text.AlignVCenter

                fontSizeMode: Text.Fit
                font.pixelSize: height * 0.5

                color: appTheme.theme.colors.text

                text: "Lane " + laneContainerRect.thisLane
            }

        }

        ListView {
            id: extensionsList

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

            interactive: false

            model: speedBackend.scStwClient.extensions[parent.thisLane].length

            delegate: ConnectionDelegate {
                property var thisExtension: speedBackend.scStwClient.extensions[laneContainerRect.thisLane][index]
                property var stateTranslations: ["disconnected", "connecting", "connecting", "connected"]
                property var batteryStateStrings: ["critical", "warning", "fine", "charging", "notCharging"]
                color: control.backgroundColor

                batteryState: thisExtension["batteryState"] === -1 ? "unknown":batteryStateStrings[thisExtension["batteryState"]]

                height: extensionsList.height / extensionsList.model

                enabled: true

                text: thisExtension["type"] === 0 ? "StartPad":"TopPad" // TODO: make dynamic with ScStw::extensionTypeToString()
                status: {'status': stateTranslations[thisExtension["state"]]}
            }
        }
    }
}