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

import de.itsblue.LedDisplayController 1.0
import de.itsblue.bluetoothleuart 1.0

Page {
    id: root

    property bool actionButtonVisible: true
    property bool backButtonVisible: true

    title: backend.bleClient.currentDevice === null ? "":backend.bleClient.currentDevice.name

    signal opened()

    function backButtonClicked() {
        backend.bleClient.disconnectFromDevice()
    }

    function actionButtonClicked() {
        displayEditDialog.edit()
    }

    ColumnLayout {
        id: mainLayout
        anchors {
            fill: parent
            margins: Math.min(parent.height, parent.width) * 0.05
        }

        DisplayTextModelListView {
            id: displayTextModelListView
            Layout.preferredWidth: parent.width
            Layout.fillHeight: true
            Layout.alignment: Layout.Center

            header:  Item {

                width: parent.width
                height: 100 + mainLayout.anchors.margins

                Chip {

                    anchors {
                        top: parent.top
                        left: parent.left
                        right: parent.right
                    }

                    height: 100
                radius: height * 0.2

                interactive: false

                color: "white"

                Column {

                    anchors.fill: parent
                    anchors.margins: height * 0.05

                    SwitchDelegate {
                        id: autoBrightnessSwitch
                        width: parent.width
                        height: parent.height / 2

                        checked: backend.displayBrightness.automaticBrightnessAdjustment

                        text: qsTr("Automically adjust brightness")

                        onCheckedChanged: {
                            backend.displayBrightness = {
                                "displayBrightness": brightnessSlider.value,
                                "automaticBrightnessAdjustment": autoBrightnessSwitch.checked
                            }

                        }
                    }

                    RowLayout {
                        width: parent.width - autoBrightnessSwitch.padding * 2
                        height: parent.height / 2
                        spacing: mainLayout.anchors.margins

                        anchors.horizontalCenter: parent.horizontalCenter

                        Text {
                            Layout.fillHeight: true
                            verticalAlignment: Text.AlignVCenter
                            font.pixelSize: parent.height * 0.5
                            font.family: fontAwesome.name
                            text: "\uf186"
                        }

                        Slider {
                            id: brightnessSlider
                            Layout.fillWidth: true
                            Layout.fillHeight: true

                            from: 0
                            to: 50
                            stepSize: 1

                            value: backend.displayBrightness.displayBrightness

                            onPressedChanged: {
                                if(!pressed) {
                                    backend.displayBrightness = {
                                        "displayBrightness": value,
                                        "automaticBrightnessAdjustment": autoBrightnessSwitch.checked
                                    }
                                }
                            }

                            ToolTip {
                                parent: brightnessSlider.handle
                                visible: brightnessSlider.pressed
                                text: brightnessSlider.value
                            }
                        }

                        Text {
                            Layout.fillHeight: true
                            verticalAlignment: Text.AlignVCenter
                            font.pixelSize: parent.height * 0.5
                            font.family: fontAwesome.name
                            text: "\uf185"
                        }
                    }
                }
            }
        }
        }
    }

    DisplayEditDialog {
        id: displayEditDialog

        Material.theme: root.Material.theme
        Material.accent: root.Material.accent
    }

    Dialog {
        id: loadingDialog

        property bool shouldBeOpen: false

        onShouldBeOpenChanged: {
            if(shouldBeOpen)
                open()
            else
                close()
        }

        parent: Overlay.overlay

        x: (parent.width - width) / 2
        y: (parent.height - height) / 2

        closePolicy: Popup.NoAutoClose
        modal: true

        Material.theme: root.Material.theme
        Material.accent: root.Material.accent

        contentItem: ColumnLayout {
            BusyIndicator {
            }

            Text {
                Layout.alignment: Layout.Center
                text: qsTr("loading...")
            }
        }
    }

    states: [
        State {
            name: LedDisplayBackend.Connected
        },
        State {
            name: LedDisplayBackend.Loading

            PropertyChanges {
                target: loadingDialog
                shouldBeOpen: true
            }
        }
]
}