import QtQuick 2.1
import QtQuick.XmlListModel 2.0

Rectangle {
    width: 600
    height: 800

    ListView {
        anchors.fill: parent
        clip: true
        model: dataModel
        delegate: Item {
            width: parent.width
            height: 20
            Text { text: "%1(%2)".arg(name).arg(breweryName); verticalAlignment: Text.AlignVCenter }
        }
    }

    Rectangle {
        anchors{ bottom: parent.bottom; right: parent.right }
        width: Math.max(txt1.contentWidth, txt2.contentWidth, txt3.contentWidth)
        height: txt1.contentHeight + txt2.contentHeight + txt3.contentHeight
        color: "Yellow"
        opacity: 0.6

        Column {
            id: column
            anchors.right: parent.right
            Text { id: txt1; text: "Status: "; horizontalAlignment: Text.AlignRight }
            Text { id: txt2; text: "Page: "; horizontalAlignment: Text.AlignRight }
            Text { id: txt3; text: "Total Results:"; horizontalAlignment: Text.AlignRight }
        }
    }

    XmlListModel {
        id: statusModel
        query: "/root"
        XmlRole { name: "currentPage"; query: "currentPage/number()" }
        XmlRole { name: "numberOfPages"; query: "numberOfPages/number()" }
        XmlRole { name: "totalResults"; query: "totalResults/number()" }
        XmlRole { name: "status"; query: "status/string()" }

        onStatusChanged: {
            if(status === XmlListModel.Ready) {
                txt1.text += statusModel.get(0).status
                txt2.text += "%1/%2".arg(statusModel.get(0).currentPage).arg(statusModel.get(0).numberOfPages)
                txt3.text += "%1".arg(statusModel.get(0).totalResults)
            }
        }
    }

    XmlListModel {
        id: dataModel
        xml: statusModel.xml
        query: "/root/data/item"
        XmlRole { name: "beerid"; query: "id/string()" }
        XmlRole { name: "name"; query: "name/string()" }
        XmlRole { name: "breweryName"; query: "breweries/item/name/string()" }
    }

    Component.onCompleted: search("Black", function(ret){ load(ret) })

    function search(word, callback) {
        var url = "http://api.brewerydb.com/v2/search?q=%1&p=1&key=4f6edd5e58c02bdb33f83e75edfbc422&withBreweries=Y&type=beer&format=xml".arg(word)
        var req = new XMLHttpRequest()
        req.open("GET", url)
        req.setRequestHeader("Content-Type", "text/xml")
        req.onreadystatechange = function(){
            if (req.readyState === XMLHttpRequest.DONE && req.status === 200){
                callback(req.responseText)
            }
        }
        req.send()
    }

    function load(xml) {
        statusModel.xml = xml
    }
}