Main.qml

// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only

import QtQuick
import QtQuick.Controls.Material
import QtQuick.Layouts

Rectangle {
    id: root

    property bool connected: false
    property string ip: "0.0.0.0"

    width: 400
    height: 800
    color: Material.backgroundColor

    Material.theme: Application.styleHints.colorScheme === Qt.Dark ? Material.Dark : Material.Light
    Material.accent: Material.Blue
    Material.primary: Material.Blue

    Column {
        id: column
        anchors.fill: parent

        Rectangle {
            id: statusBar
            width: column.width
            height: Constants.statusBarHeight
            color: root.connected ? Constants.statusBarConnected : Constants.statusBarDisconnected

            Row {
                anchors.horizontalCenter: parent.horizontalCenter
                height: statusBar.height
                spacing: 6

                Text {
                    height: parent.height
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter

                    font.family: Constants.iconFont.font.family
                    font.pixelSize: Constants.iconSize
                    text: root.connected ? Constants.icons.link : Constants.icons.unlink
                }

                Text {
                    id: statusText
                    height: parent.height
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter

                    font.pixelSize: Constants.smTextSize
                    wrapMode: Text.WordWrap

                    text: root.connected ? qsTr("Qt Design Studio is connected")
                                         : qsTr("Qt Design Studio is disconnected.")
                }
            }

            Connections {
                target: backend
                function onConnectedChanged(isConnected) {
                    root.connected = isConnected
                }
            }
        }

        StackLayout {
            id: stackLayout

            width: column.width
            height: column.height - statusBar.height - tabBar.height
            clip: true

            HomePage { id: homePage }
            SettingsPage { id: settingsPage }
        }

        NavigationBar {
            id: tabBar
            width: column.width
            height: Constants.tabBarHeight

            NavigationButton {
                id: home
                myIcon: Constants.icons.home
                text: qsTr("Home")
                checked: true
                checkable: true
                autoExclusive: true
                onClicked: stackLayout.currentIndex = 0

                height: Constants.tabBarHeight // TODO
            }

            NavigationButton {
                id: settings
                myIcon: Constants.icons.settings
                text: qsTr("Settings")
                checkable: true
                autoExclusive: true
                onClicked: stackLayout.currentIndex = 1

                height: Constants.tabBarHeight // TODO
            }
        }
    }

    Popup {
        id: popup
        width: 250
        height: 75
        modal: true
        visible: false

        anchors.centerIn: parent

        Rectangle {
            anchors.fill: parent
            color: "white"

            Text {
                id: popupText
                anchors.centerIn: parent
            }
        }

        ProgressBar {
            id: progressBar
            anchors.bottom: parent.bottom
            anchors.left: parent.left
            anchors.right: parent.right
            from: 0
            to: 100
            height: 2
            visible: true
            indeterminate: true
        }

        Timer {
            id: timer
            repeat: false
            running: popup.visible
            onTriggered: {
                popup.visible = false
            }
        }

        Connections {
            target: backend
            function onPopupOpen() {
                popup.visible = true
            }

            function onPopupClose() {
                popup.visible = false
            }

            function onPopupChangeText(text, timeout) {
                popupText.text = text
                timer.interval = timeout
                timer.running = timeout > 0
            }

            function onPopupChangeProgress(percentage){
                progressBar.value = percentage
            }

            function onPopupProgressIndeterminateChanged(indeterminate) {
                progressBar.indeterminate = indeterminate
            }
        }
    }
}