import QtQuick 2.0
import Sailfish.Silica 1.0

Page {
    id: root

    property var pebble: null

    SilicaFlickable {
        id: flickable
        anchors.fill: parent
        contentHeight: column.height

        VerticalScrollDecorator { flickable: flickable }

        PullDownMenu {
            MenuItem {
                text: qsTr("About")
                onClicked: {
                    pageStack.push(Qt.resolvedUrl("InfoPage.qml"))
                }
            }
            MenuItem {
                text: qsTr("Developer tools")
                onClicked: {
                    pageStack.push(Qt.resolvedUrl("DeveloperToolsPage.qml"), {pebble: root.pebble})
                }
            }
        }
        Column {
            id: column
            width: root.width
            spacing: Theme.paddingLarge
            PageHeader {
                title: qsTr("RockPool")
            }

            ListView {
                model: mainMenuModel
            }

            //Creating the menu list this way to allow the text field to be translatable (http://askubuntu.com/a/476331)
            ListModel {
                id: mainMenuModel
                dynamicRoles: true
            }

            Component.onCompleted: {
                populateMainMenu();
            }

            Connections {
                target: root.pebble
                onFirmwareUpgradeAvailableChanged: {
                    populateMainMenu();
                }
            }

            function populateMainMenu() {
                mainMenuModel.clear();

                mainMenuModel.append({
                                         icon: "stock_notification",
                                         text: qsTr("Manage notifications"),
                                         page: "NotificationsPage.qml",
                                         color: "blue"
                                     });

                mainMenuModel.append({
                                         icon: "stock_application",
                                         text: qsTr("Manage Apps"),
                                         page: "InstalledAppsPage.qml",
                                         showWatchApps: true,
                                         color: "green"
                                     });

                mainMenuModel.append({
                                         icon: "clock-app-symbolic",
                                         text: qsTr("Manage Watchfaces"),
                                         page: "InstalledAppsPage.qml",
                                         showWatchFaces: true,
                                         color: "black"
                                     });

                mainMenuModel.append({
                                         icon: "settings",
                                         text: qsTr("Settings"),
                                         page: "SettingsPage.qml",
                                         showWatchFaces: true,
                                         color: "gold"
                                     });

                if (root.pebble.firmwareUpgradeAvailable) {
                    mainMenuModel.append({
                                             icon: "preferences-system-updates-symbolic",
                                             text: qsTr("Firmware upgrade"),
                                             page: "FirmwareUpgradePage.qml",
                                             color: "red"
                                         });
                }
            }

            PebbleModels {
                id: modelModel
            }

            Column {
                anchors.fill: parent
                Item {
                    //Layout.alignment: Qt.AlignHCenter
                    width: root.width
                    Image {
                        id: watchImage
                        width: implicitWidth * height / implicitHeight
                        height: parent.height
                        anchors.horizontalCenter: parent.horizontalCenter

                        source:  Qt.resolvedUrl("qrc:///"+modelModel.get(root.pebble.model).image)
                        fillMode: Image.PreserveAspectFit
                    }
                    Item {
                        id: watchFace
                        height: parent.height * (modelModel.get(root.pebble.model - 1).shape === "rectangle" ? .5 : .515)
                        width: height * (modelModel.get(root.pebble.model - 1).shape === "rectangle" ? .85 : 1)
                        anchors.centerIn: parent
                        anchors.horizontalCenterOffset: units.dp(1)
                        anchors.verticalCenterOffset: units.dp(modelModel.get(root.pebble.model - 1).shape === "rectangle" ? 0 : 1)

                        Image {
                            id: image
                            anchors.fill: parent
                            source: "file://" + root.pebble.screenshots.latestScreenshot
                            visible: false
                        }

                        Component.onCompleted: {
                            if (!root.pebble.screenshots.latestScreenshot) {
                                root.pebble.requestScreenshot();
                            }
                        }

                        Rectangle {
                            id: textItem
                            anchors.fill: parent
                            layer.enabled: true
                            radius: modelModel.get(root.pebble.model - 1).shape === "rectangle" ? units.gu(.5) : height / 2
                            // This item should be used as the 'mask'
                            layer.samplerName: "maskSource"
                            layer.effect: ShaderEffect {
                                property var colorSource: image;
                                fragmentShader: "
                                    uniform lowp sampler2D colorSource;
                                    uniform lowp sampler2D maskSource;
                                    uniform lowp float qt_Opacity;
                                    varying highp vec2 qt_TexCoord0;
                                    void main() {
                                        gl_FragColor =
                                            texture2D(colorSource, qt_TexCoord0)
                                            * texture2D(maskSource, qt_TexCoord0).a
                                            * qt_Opacity;
                                    }
                                "
                            }
                        }
                    }
                }
                Column {
                    width: root.width
                    spacing: units.gu(2)
                    Rectangle {
                        height: units.gu(10)
                        width: height
                        radius: height / 2
                        color: root.pebble.connected ? "green" : "red"

                        IconButton {
                            anchors.fill: parent
                            anchors.margins: units.gu(2)
                            icon.source: root.pebble.connected ? "image://theme/icon-m-acknowledge" : "image://theme/icon-m-reset"
                        }
                    }

                    Label {
                        text: root.pebble.connected ? qsTr("Connected") : qsTr("Disconnected")
                        width: root.width
                    }
                }
            }


            Column {
                width: root.width
                //Layout.preferredHeight: childrenRect.height
                spacing: menuRepeater.count > 0 ? 0 : units.gu(2)
                Label {
                    text: qsTr("Your Pebble smartwatch is disconnected. Please make sure it is powered on, within range and it is paired properly in the Bluetooth System Settings.")
                    width: parent.width - units.gu(4)
                    anchors.horizontalCenter: parent.horizontalCenter
                    wrapMode: Text.WordWrap
                    visible: !root.pebble.connected
                    font.pixelSize: Theme.fontSizeLarge
                    horizontalAlignment: Text.AlignHCenter
                }

                Label {
                    text: qsTr("Your Pebble smartwatch is in factory mode and needs to be initialized.")
                    width: parent.width - units.gu(4)
                    anchors.horizontalCenter: parent.horizontalCenter
                    wrapMode: Text.WordWrap
                    visible: root.pebble.connected && root.pebble.recovery && !root.pebble.upgradingFirmware
                    font.pixelSize: Theme.fontSizeLarge
                    horizontalAlignment: Text.AlignHCenter
                }
                Button {
                    text: qsTr("Initialize Pebble")
                    onClicked: root.pebble.performFirmwareUpgrade();
                    visible: root.pebble.connected && root.pebble.recovery && !root.pebble.upgradingFirmware
                    color: "orange"
                    anchors.horizontalCenter: parent.horizontalCenter
                }

                Rectangle {
                    id: upgradeIcon
                    height: units.gu(10)
                    width: height
                    radius: width / 2
                    color: Theme.highlightColor
                    anchors.horizontalCenter: parent.horizontalCenter
                    BusyIndicator {
                        anchors.horizontalCenter: parent.horizontalCenter
                        running: upgradeInProgress
                        size: BusyIndicatorSize.Large
                    }
                    visible: root.pebble.connected && root.pebble.upgradingFirmware
                }

                Label {
                    text: qsTr("Upgrading...")
                    font.pixelSize: Theme.fontSizeLarge
                    anchors.horizontalCenter: parent.horizontalCenter
                    visible: root.pebble.connected && root.pebble.upgradingFirmware
                }

                Repeater {
                    id: menuRepeater
                    model: root.pebble.connected && !root.pebble.recovery && !root.pebble.upgradingFirmware ? mainMenuModel : null
                    delegate: ListItem {

                        Row {
                            anchors.fill: parent
                            anchors.margins: units.gu(1)

                            Rectangle {
                                //Layout.fillHeight: true
                                //Layout.preferredWidth: height
                                //backgroundColor: model.color
                                Image {
                                    anchors.fill: parent
                                    anchors.margins: units.gu(.5)
                                    source: model.icon
                                }
                            }


                            Label {
                                text: model.text
                                width: page.width
                            }
                        }

                        onClicked: {
                            var options = {};
                            options["pebble"] = root.pebble
                            var modelItem = mainMenuModel.get(index)
                            options["showWatchApps"] = modelItem.showWatchApps
                            options["showWatchFaces"] = modelItem.showWatchFaces
                            pageStack.push(Qt.resolvedUrl(model.page), options)
                        }
                    }
                }
            }
        }
    }
    Connections {
        target: pebble
        onOpenURL: {
            if (url) {
                pageStack.push(Qt.resolvedUrl("AppSettingsPage.qml"), {uuid: uuid, url: url, pebble: pebble})
            }
        }
    }
}