import QtQuick 2.0
import QtQml 2.1
import Sailfish.Silica 1.0
import RockPool 1.0

Page {
    id: root

    property var pebble: null
    property bool showWatchApps: false
    property bool showWatchFaces: false

    property string link: ""

    function fetchHome() {
        if (showWatchApps) {
            client.fetchHome(AppStoreClient.TypeWatchapp)
        } else {
            client.fetchHome(AppStoreClient.TypeWatchface)
        }
    }
    SilicaFlickable {
        id: flickable
        anchors.top: parent.top
        width: parent.width
        PageHeader {
            title: showWatchApps ? qsTr("Add new watchapp") : qsTr("Add new watchface")
        }
        PullDownMenu {
                MenuItem {
                    text: qsTr("Show search")
                    onClicked: {
                        if (searchField.shown) {
                            searchField.shown = false;
                            root.fetchHome();
                        } else {
                            searchField.shown = true;
                        }
                    }
                }
        }

        Component.onCompleted: {
            if (root.link) {
                client.fetchLink(link)
            } else {
                root.fetchHome()
            }
        }

        AppStoreClient {
            id: client
            hardwarePlatform: pebble.hardwarePlatform
        }

        Item {
            id: searchField
            anchors { left: parent.left; right: parent.right; top: parent.top }
            anchors.topMargin: shown ? 0 : -height
            Behavior on anchors.topMargin { NumberAnimation {} }
            opacity: shown ? 1 : 0
            Behavior on opacity { NumberAnimation {} }
            height: units.gu(6)

            property bool shown: false
            onShownChanged: {
                if (shown) {
                    searchTextField.focus = true;
                }
            }

            SearchField {
                id: searchTextField
                anchors.centerIn: parent
                width: parent.width - units.gu(2)
                onDisplayTextChanged: {
                    searchTimer.restart()
                }

                Timer {
                    id: searchTimer
                    interval: 300
                    onTriggered: {
                        client.search(searchTextField.displayText, root.showWatchApps ? AppStoreClient.TypeWatchapp : AppStoreClient.TypeWatchface);
                    }
                }
            }
        }

        Item {
            anchors { left: parent.left; top: searchField.bottom; right: parent.right; bottom: parent.bottom }
            ListView {
                anchors.fill: parent
                model: ApplicationsFilterModel {
                    id: appsFilterModel
                    model: client.model
                }
                clip: true
                section.property: "groupId"
                section.labelPositioning: ViewSection.CurrentLabelAtStart |
                                          ViewSection.InlineLabels
                section.delegate: ListItem {
                    height: section ? label.implicitHeight + units.gu(3) : 0

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

                    Row {
                        anchors.fill: parent
                        anchors.margins: units.gu(1)
                        Label {
                            id: label
                            text: client.model.groupName(section)
                            font.pixelSize: Theme.fontSizeLarge
    //                        font.weight: Font.DemiBold
                            elide: Text.ElideRight
                            width: parent.width
                        }
                        Button {
                            implicitWidth: seeAllLabel.implicitWidth + height
                            Row {
                                anchors.verticalCenter: parent.verticalCenter
                                Label {
                                    id: seeAllLabel
                                    text: qsTr("See all")
                                }
                                IconButton {
                                    implicitHeight: parent.height
                                    implicitWidth: height
                                    icon.source: "image://theme/icon-m-forward"
                                }
                            }
                            onClicked: {
                                pageStack.push(Qt.resolvedUrl("AppStorePage.qml"), {pebble: root.pebble, link: client.model.groupLink(section), title: client.model.groupName(section)});
                            }
                        }
                    }
                }

                footer: Item {
                    height: client.model.links.length > 0 ? units.gu(6) : 0
                    width: parent.width

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

                        Repeater {
                            model: client.model.links
                            Button {
                                text: client.model.linkName(client.model.links[index])
                                onClicked: client.fetchLink(client.model.links[index]);
                                color: UbuntuColors.orange
                                width: parent.width
                            }
                        }
                    }
                }

                delegate: ListItem {
                    height: delegateColumn.height + units.gu(2)

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

                        AnimatedImage {
                            source: model.icon
                            asynchronous: true
    //                        sourceSize.width: width
    //                        sourceSize.height: height
                        }

                        Column {
                            id: delegateColumn
                            width: parent.width
                            //Layout.fillHeight: true;
                            Label {
                                width: parent.width
                                text: model.name
                                font.weight: Font.DemiBold
                                elide: Text.ElideRight
                            }
                            Label {
                                width: parent.width
                                text: model.category
                            }
                            Row {
                                IconButton {
                                    icon.source: "image://theme/icon-m-back"
                                    id: like
                                    //Layout.preferredHeight: parent.height
                                    //Layout.preferredWidth: height
                                    implicitHeight: parent.height
                                }
                                Label {
                                    width: parent.width
                                    text: model.hearts
                                }
                                IconButton {
                                    id: tickIcon
                                    icon.source: "image://theme/icon-m-acknowledge"
                                    implicitHeight: parent.height
                                    //Layout.preferredWidth: height
                                    visible: root.pebble.installedApps.contains(model.storeId) || root.pebble.installedWatchfaces.contains(model.storeId)
                                    Connections {
                                        target: root.pebble.installedApps
                                        onTargetChanged: {
                                            tickIcon.visible = root.pebble.installedApps.contains(model.storeId) || root.pebble.installedWatchfaces.contains(model.storeId)
                                        }
                                    }

                                    Connections {
                                        target: root.pebble.installedWatchfaces
                                        onTargetChanged: {
                                            tickIcon.visible = root.pebble.installedApps.contains(model.storeId) || root.pebble.installedWatchfaces.contains(model.storeId)
                                        }
                                    }

                                }
                            }
                        }

                    }

                    onClicked: {
                        client.fetchAppDetails(model.storeId);
                        pageStack.push(Qt.resolvedUrl("AppStoreDetailsPage.qml"), {app: appsFilterModel.get(index), pebble: root.pebble})
                    }
                }
            }

    //        RowLayout {
    //            id: buttonRow
    //            anchors { left: parent.left; bottom: parent.bottom; right: parent.right; margins: units.gu(1) }
    //            spacing: units.gu(1)
    //            Button {
    //                text: qsTr("Previous")
    //                Layout.fillWidth: true
    //                enabled: client.offset > 0
    //                onClicked: {
    //                    client.previous()
    //                }
    //            }
    //            Button {
    //                text: qsTr("Next")
    //                Layout.fillWidth: true
    //                onClicked: {
    //                    client.next()
    //                }
    //            }
    //        }
        }

        BusyIndicator {
            anchors.centerIn: parent
            running: client.busy
        }
    }
}