import QtQuick 1.0

import ".."

BorderImage {
    id: buyView
    anchors.fill: parent
    border {
        left: 0
        top: 0
        right: width
        bottom: height
    }
    horizontalTileMode: BorderImage.Stretch
    verticalTileMode: BorderImage.Stretch
    source: "../gfx/sky.png"

    property int frameMargin: 1
    property int rowHeight:   65
    property color borderColor:  "orange"
    property bool isViewBusy : catalogModel.isApplicationBusy

    Connections {
        target: screen
        onPurchaseCompleted:{
            if(isActivated){
                console.log("purchaseCompleted");
                buyView.isViewBusy = true;
                buyButton.opacity = 0;
                exitButton.opacity = 0;
                closeTimer.running = true;
                screen.dead = true; //disable "Resume" option
            }
        }
    }

    Item {
        id: mainpane

        property bool showDetails: false
        property int  detailsProdIndex : -1
        property string detailsProductTitle: ""
        property string detailsProductDescr: ""

        height: parent.height - buyView.rowHeight
        width: parent.width
        anchors {
            top: parent.top
            left: parent.left
        }

        Flickable{
            id: buyDialog
            anchors {
                fill: parent
                margins: buyView.rowHeight / 2
            }
            contentWidth: detailsContent.width
            contentHeight: detailsContent.height
            flickableDirection: Flickable.VerticalFlick

            Column{
                id: detailsContent
                opacity: (mainpane.showDetails) ? 1 : 0
                spacing: buyView.rowHeight / 2

                Row{
                    id: detailsRow
                    spacing: buyView.rowHeight / 2
                    Image {
                        id: detailsImage
                        fillMode: Image.PreserveAspectFit
                        smooth: true
                        width: 250

                        states: [
                            State {
                                name: "portrait"; when: buyView.width < buyView.height
                                PropertyChanges {
                                    target: detailsImage
                                    width: 150
                                }
                            }
                        ]
                    }

                    Text {
                        id: detailsTitle
                        font.pointSize: 12; font.bold: true
                        anchors.verticalCenter: parent.verticalCenter
                    }
                }

                Text {
                    id: detailsDescription
                    width: parent.width
                    wrapMode: Text.Wrap
                }
            }
        }

        // The delegate for each section header in the list below 'catalog'
        Component {
            id: sectionHeading
            Rectangle {
                height: buyView.rowHeight * 0.75
                width: catalog.width
                color: "#6b9fba"

                Text {
                    property real charWidthRatio: 0.55
                    id: headText
                    text: (section === 'true') ? "Items you have" : "Items to buy"
                    font.bold: true
                    anchors.centerIn: parent
                    font.italic: true
                    font.family: "Arial"
                    //make the text to fit the parent in any screen orientation
                    font.pixelSize: ((parent.height * charWidthRatio * text.length >
                                        parent.width) ? parent.width :
                                                parent.height * charWidthRatio * text.length) * 0.8
                                                    / text.length / charWidthRatio
                    color: "#ffdd00"
                    style: Text.Outline;
                    styleColor: "white"
                }
            }
        }

        ListView {
            id: catalog
            anchors{
                fill: parent
                margins: buyView.frameMargin
            }
            opacity: (mainpane.showDetails) ? 0 : 1
            spacing: buyView.rowHeight / 2

            Component {
                id: catalogDelegate

                Item {
                    width: parent.width
                    height: buyView.rowHeight + 2 * buyView.frameMargin

                    Rectangle {
                        id: rowBackground
                        x: 2; y: 2; width: catalog.width - x*2; height: parent.height - y*2
                        color: "black"
                        border.color: buyView.borderColor
                        radius: 5
                        smooth: true
                        opacity: 0
                    }

                    MouseArea {
                        id: catalogMouseArea
                        anchors.fill:parent

                        onClicked: {
                            if(!iap_isDataKnown || iap_productid === ""){
                                return;
                            }

                            mainpane.detailsProdIndex = index;
                            mainpane.detailsProductTitle = iap_title;
                            mainpane.detailsProductDescr = iap_longDescr;
                            if(mainpane.showDetails){
                                mainpane.state = ''
                            }else{
                                mainpane.state = 'Details'
                                buyButton.opacity = (iap_isActivated) ? 0 : 1
                            }
                        }

                        states: [
                            State {
                                name: "highlighted"
                                when: catalogMouseArea.pressed
                                PropertyChanges {
                                    target: rowBackground
                                    opacity: 0.4
                                }
                            }
                        ]
                    }

                    Row {
                        id: itemRow
                        width: parent.width - buyView.rowHeight;
                        height: buyView.rowHeight + buyView.frameMargin
                        spacing: buyView.rowHeight / 3
                        x: buyView.rowHeight / 2

                       Image {
                           id: itemImage
                           //NOTE image provider caches data, the side effect is that updated image is not shown
                           // workaround for http://bugreports.qt.nokia.com/browse/QTBUG-14900
                           source: (iap_productid !== "") ? "image://imagestatusprovider/"+index+
                                          "ignoringpart" + Qt.formatTime(new Date(), "hhmmsszzz") : ""
                           width: parent.height
                           height: parent.height
                       }

                       BusyIndicator {
                           anchors.verticalCenter: parent.verticalCenter
                           width: buyView.rowHeight / 2
                           height: buyView.rowHeight / 2
                           on: iap_isBusy
                       }

                       Text {
                           id: itemDescr
                           width: parent.width - itemImage.width - itemPrice.width - 3 * itemRow.spacing
                           height: parent.height
                           text: (iap_isDataKnown) ? iap_title : "... loading data from network"
                           wrapMode: Text.WordWrap
                           verticalAlignment: Text.AlignVCenter
                       }

                       Text {
                           id: itemPrice
                           width: parent.height * 3
                           height: parent.height
                           text: (iap_isDataKnown && !iap_isActivated) ? iap_price : ""
                           verticalAlignment: Text.AlignVCenter
                           horizontalAlignment: Text.AlignRight
                       }
                    }
                }
            }//Component

            model: catalogModel
            delegate: catalogDelegate

            section.property: "iap_isActivated"
            section.criteria: ViewSection.FullString
            section.delegate: sectionHeading
        }

        states: [
            State {
                name: "Details"
                PropertyChanges {target: mainpane; showDetails: true;}
                PropertyChanges {target: buyButton; opacity: 1}
                PropertyChanges {target: exitButton; onClicked: {mainpane.state = ''}}
                PropertyChanges {target: detailsImage; source: "image://imagestatusprovider/"+
                                                               mainpane.detailsProdIndex +
               //NOTE image provider caches data, the side effect is that updated image is not shown
               // workaround for http://bugreports.qt.nokia.com/browse/QTBUG-14900
                                        "ignoringpart" + Qt.formatTime(new Date(), "hhmmsszzz")}
                PropertyChanges {
                    target: detailsTitle
                    text: mainpane.detailsProductTitle
                    wrapMode: Text.WordWrap
                    width: mainpane.width - detailsImage.width - detailsRow.spacing * 2 - buyView.rowHeight * 2
                }
                PropertyChanges {target: detailsDescription; text: mainpane.detailsProductDescr; wrapMode: Text.WordWrap}
                PropertyChanges {target: scroller; scrollArea: buyDialog}
            }
        ]


        ScrollBar {
            id: scroller
            scrollArea: catalog; width: 8
            anchors { right: parent.right; top: parent.top; bottom: parent.bottom }
        }

    }

    Rectangle {
        id: bottomFadingEdge
        height: buyView.rowHeight
        width: parent.width
        anchors {
            right: toolbar.right
            bottom: toolbar.top
        }
        gradient: Gradient {
            GradientStop { position: 0.0; color: "transparent" }
            GradientStop { position: 1.0; color: "#0ab0e7" }
        }

        states: State {
            name: "hideBottomFadingEdge"
            when: (mainpane.state != "Details" &&
                           Math.round(catalog.visibleArea.yPosition * 10000) >=
                                    Math.round((1.0 - catalog.visibleArea.heightRatio) * 10000)) ||

                  (mainpane.state == "Details" &&
                            Math.round(buyDialog.visibleArea.yPosition * 10000) >=
                                   Math.round((1.0 - buyDialog.visibleArea.heightRatio) * 10000))
            PropertyChanges { target: bottomFadingEdge; opacity: 0 }
        }

        transitions: Transition {
            from: "hideBottomFadingEdge"; to: ""
            NumberAnimation { properties: "opacity"; duration: 600 }
        }
    }

    Rectangle {
        id: topFadingEdge
        height: buyView.rowHeight
        width: parent.width
        anchors {
            right: parent.right
            top: parent.top
        }
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#0ab0e7" }
            GradientStop { position: 1.0; color: "transparent" }
        }

        states: State {
            name: "hideTopFadingEdge"
            when: (mainpane.state != "Details" && catalog.visibleArea.yPosition <= 0) ||
                  (mainpane.state == "Details" && buyDialog.visibleArea.yPosition <= 0)
            PropertyChanges { target: topFadingEdge; opacity: 0 }
        }

        transitions: Transition {
            from: "hideTopFadingEdge"; to: ""
            NumberAnimation { properties: "opacity"; duration: 600 }
        }
    }

    Rectangle {
        id: toolbar
        height: buyButton.height * 0.7
        width: parent.width
        color: "#ace3f9"
        anchors {
            right: parent.right
            bottom: parent.bottom
        }

        Button {
            id: buyButton
            name: "buy"
            scale: 0.7
            opacity: 0
            anchors{
                left: parent.left
                verticalCenter: parent.verticalCenter
                margins: buyView.frameMargin
            }
            onClicked: {
                catalogModel.buy(mainpane.detailsProdIndex);
            }
        }

        Button {
            id: exitButton
            name: "ok"
            scale: 0.7
            anchors{
                right: parent.right
                verticalCenter: parent.verticalCenter
                margins: buyView.frameMargin
            }
            onClicked: {
                buyView.isViewBusy = true;
                // we need timer to show busy indicator before exit
                closeTimer.running = true;
            }
        }
    }

    // overall busy indicator
    BusyIndicator {
        anchors.centerIn: parent
        on: buyView.isViewBusy
        larger: true
    }

    Timer {
        id: closeTimer
        interval: 500; running: false; repeat: false
        onTriggered: {
            loader.source = "";
            screen.state = "";
        }
    }
}
