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
        }

        Chip {
            Layout.fillWidth: true
            Layout.preferredHeight: 35
            Layout.alignment: Layout.Center

            interactive: false

            color: "white"

            RowLayout {
                spacing: mainLayout.anchors.margins

                anchors.fill: parent
                anchors.leftMargin: width * 0.05
                anchors.rightMargin: anchors.leftMargin

                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: 255
                    stepSize: 1

                    value: backend.displayBrightness

                    onPressedChanged: {
                        if(!pressed)
                            backend.displayBrightness = value
                    }

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

        Item {
            Layout.fillWidth: true
            Layout.preferredHeight: mainLayout.height * 0.025
        }

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

            clip: true
        }
    }

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