import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.VirtualKeyboard 2.2
import QtQuick.VirtualKeyboard.Styles 2.2
import QtQuick.Controls.Material 2.0
import QtQuick.Layouts 1.3
import QtQuick.Shapes 1.0
import QtQuick.Dialogs.qml 1.0
import QtGraphicalEffects 1.0

ApplicationWindow {
    id: window
    visible: true
    width: 800
    height: 600
    title: qsTr("Batching Plant")

    Material.theme: Material.Dark
    Material.primary: Material.Blue
    Material.accent: Material.color(Material.Cyan, Material.Shade500)
    Material.foreground: Material.LightBlue

    header: ToolBar {
        contentHeight: toolButton.implicitHeight

        ToolButton {
            id: toolButton

            contentItem: Image {
                fillMode: Image.Pad
                horizontalAlignment: Image.AlignHCenter
                verticalAlignment: Image.AlignVCenter
                source: stackView.depth > 1 ? "images/drawer/back.png" : "images/drawer/drawer.png"
            }

            onClicked: {
                if (stackView.depth > 1) {
                    stackView.pop()
                } else {
                    drawer.open()
                }
            }
        }

        Label {
            text: stackView.currentItem.title
            anchors.centerIn: parent
        }
    }

    Drawer {
        id: drawer
        width: window.width<400 ? window.width * 0.6 : 240
        height: window.height
        dragMargin: 20
        dim: false
        modal: false

        background: Rectangle {
            Rectangle {
                id: background_
                width: parent.width
                height: parent.height
                color: window.color
                layer.enabled: true
                layer.effect: DropShadow {
                    horizontalOffset: 3
                    radius: 8.0
                    samples: 17
                    color: "#80000000"
                }
            }
            Rectangle {
                x: parent.width
                width: window.width
                height: parent.height
                color: "#000"
                opacity: drawer.position/1.3
            }
        }

        Label {
            id: options
            text: "Options"
            height: header.height
            font.pointSize: 14
            font.bold: true
            anchors.horizontalCenter: parent.horizontalCenter
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }
        Shape {
            anchors.top: options.bottom
            ShapePath {
                strokeColor: "DarkCyan"
                strokeWidth: 3
                fillColor: "DarkCyan"
                PathLine {
                    x: drawer.width - 1
                }
            }
        }

        ListView {
            id: listView
            focus: true
            currentIndex: 0
            anchors.fill: parent
            anchors.topMargin: options.height

            delegate: ItemDelegate {

                width: parent.width
                text: model.title
                highlighted: ListView.isCurrentItem

                onClicked: {
                    listView.currentIndex = index
                    stackView.clear()
                    stackView.push(model.source)
                    drawer.close()
                }
            }

            model: ListModel {
                ListElement { title: "Monitoring"; source: "monitoring.ui.qml" }
                ListElement { title: "Processes"; source: "processes.ui.qml" }
                ListElement { title: "Configuration"; source: "new_process.ui.qml" }
                ListElement { title: "Diagnostics"; source: "monitoring.ui.qml" }
                ListElement { title: "History"; source: "monitoring.ui.qml" }
                ListElement { title: "About"; source: "monitoring.ui.qml" }
            }
        }
    }

    StackView {
        id: stackView
        initialItem: "monitoring.ui.qml"
        anchors.fill: parent
        transform: Translate {
            x: drawer.position*drawer.width
        }
    }

    Shortcut {
        sequences: ["Esc", "Back"]
        enabled: stackView.depth > 1
        onActivated: {
            stackView.pop()
            listView.currentIndex = -1
        }
    }

    InputPanel {
        id: inputPanel
        z: 99
        x: parent.width/2 - inputPanel.width/2
        y: parent.height
        width: parent.width<800 ? parent.width : 800

        states: State {
            name: "visible"
            when: inputPanel.active
            PropertyChanges {
                target: inputPanel
                y: parent.height - inputPanel.height
            }
        }
        transitions: Transition {
            from: ""
            to: "visible"
            reversible: true
            ParallelAnimation {
                NumberAnimation {
                    properties: "y"
                    duration : 250
                    easing.type: Easing.InOutQuad
                }
            }
        }
    }
}