import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.11
import Qt.labs.settings 1.0
import QtQuick.Dialogs 1.3
import QtGraphicalEffects 1.0

import "."
import "Buttons"
import "CustomWidgets"
import "Pages"

Window {
    property int activePage: 1
    property var phoneData: backend.phoneDataModel
    property bool phoneAppConnection: phoneData.get(phoneSelector.currentIndex).btSocketConnected

    id: mainWindow
    visible: true
    width: 600
    height: 400
    title: "Synchrony"

    ColumnLayout {
        id: mainLayout
        anchors.fill: parent
        spacing: 0

        Item {
            Layout.minimumWidth: 40
            Layout.preferredHeight: 45
            Layout.fillWidth: true
            Layout.alignment: Qt.AlignLeft | Qt.AlignTop
            z: 2

            Rectangle {
                id: topBar
                anchors.fill: parent
                color: Style.primary

                PhoneSelector {
                    id: phoneSelector
                    width: topBar.width * .3
                    anchors.right: syncRow.left
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    anchors.rightMargin: 10
                    anchors.topMargin: 10
                    anchors.bottomMargin: 10
                    listHeight: (mainWindow.height * .9) - topBar.height
                    itemBgColor: Style.primary
                    itemTextColor: Style.colorOnPrimary
                    comboBgColor: count > 0 ? Style.colorOnPrimary : Style.inactive
                    downArrowColor: Style.primaryVariant
                    model: mainWindow.phoneData
                }
			}
		}
	}
}