import QtQuick 2.0
import Sailfish.Silica 1.0
import Sailfish.WebView 1.0
import Sailfish.WebEngine 1.0
import QtQuick.XmlListModel 2.0
import io.thp.pyotherside 1.5

Page {
    id: page
    property variant devices: squeezeboxSettings.value("devices",[])
    //property variant defaultDevice: squeezeboxSettings.value("defaultDevice","") // squeezeboxSettings.setValue("defaultSource",[ip,port,icon,friendlyName,modelName,source])
    property bool running: true
    property bool discovering: false
    property int retries: 0


    function getXml(source) {
        var req = new XMLHttpRequest();
        req.open("get", source,false);
        req.onreadystatechange = function () {
            if (req.readyState === 4 && req.status === 200) {
                var xml = req.responseText
                var friendlyName
                var modelName
                var icon
                var ip
                var port
                var tmp = source.toString()
                tmp = tmp.split("//")
                tmp = tmp[1].split(":")
                ip = tmp[0]
                tmp = tmp[1].split("/")
                port = tmp[0]

                xml.match(/<friendlyName>(.*?)<\/friendlyName>/g).map(function(val){
                    friendlyName = val.replace(/<\/?friendlyName>/g,'')
                    //console.log(friendlyName)
                });

                xml.match(/<modelName>(.*?)<\/modelName>/g).map(function(val){
                    modelName = val.replace(/<\/?modelName>/g,'')
                    //console.log(modelName+" ("+ip+")")
                });

                xml.match(/<url>(.*?)<\/url>/g).map(function(val){

                    icon = val.replace(/<\/?url>/g,'')
                    console.log(val+" ****** 120x120 *****")
                });
                    var patt = /^UpMPD/;
                    console.log(" ************ PATT: "+patt)
                    if (patt.test(modelName))
                        deviceModel.append({"friendlyName": friendlyName,"modelName": modelName,"ip":ip,"port":port,"icon":icon,"source":source});
            }
        };
        req.send();
    }

    ListModel {id: deviceModel}

    Label {
        id: volum
        text: "VOLUMIO"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: Theme.paddingLarge
        color: Theme.primaryColor
        font.pixelSize: Theme.fontSizeExtraLarge * 2
    }
    Label {
        text: "THE MUSIC PLAYER"
        anchors.top: volum.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        //anchors.topMargin: Theme.paddingLarge
        color: Theme.primaryColor
        font.pixelSize: Theme.fontSizeSmall
    }

    Label {
        visible: !page.discovering
        text: "Choose a device"
        anchors.bottom: listview.top
        anchors.bottomMargin: Theme.paddingLarge
        anchors.horizontalCenter: parent.horizontalCenter
        color: Theme.primaryColor
        //font.pixelSize: Theme.fontSizeSmall
    }

    SilicaListView {
        id: listview
        spacing: Theme.paddingMedium
        visible: true
        anchors.centerIn: parent
        anchors.margins: Theme.paddingSmall
        height: contentHeight
        width: parent.width
        //anchors.fill: parent
        //anchors.bottomMargin: button.height
        clip: true
        model: deviceModel
        delegate: BackgroundItem {
            Rectangle {
                anchors.fill: parent
                color: Theme.highlightDimmerColor
            }
            property variant defVal: []
            width: ListView.view.width

            height: Theme.itemSizeExtraLarge
            Image {
                id: img
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: parent.left
                anchors.leftMargin: Theme.paddingLarge
                height: Theme.itemSizeLarge
                width: height
                source: "http://"+ip+":"+port+icon
            }
            Item {
                anchors.left: img.right
                height: friendlyLabel.height + nameIp.height
                anchors.leftMargin: Theme.paddingLarge
                anchors.verticalCenter: parent.verticalCenter
                Label {
                    id: friendlyLabel
                    text: friendlyName
                    //color: Theme.highlightColor
                    font.pixelSize: Theme.fontSizeLarge
                }
                Label {
                    id: nameIp
                    text: modelName + " ("+ip+")"
                    anchors.top: friendlyLabel.bottom
                    //color: Theme.highlightColor
                    font.pixelSize: Theme.fontSizeSmall
                }
            }
            onClicked: {
                console.log(" ********** http://"+ip+":"+port)
                running = false
                webPageAddress = "http://"+ip
            }
        }
    }

    BusyLabel {
        //width: parent.width
        text: "Searching for UPnP devices"
        running: page.discovering
        anchors.centerIn: parent
    }

     Button {
         id: button
         text: "Discover"
         enabled: !page.discovering
         anchors.bottom: parent.bottom
         width: parent.width
         onClicked: {
             deviceModel.clear()
             python.startDownload();
         }
     }

    function getIp(url) {
        var res = url.split(":");
        return res
    }

    function checkDevices() {
        for (var i = 0; i < devices.length; i++) {

        }
        squeezeboxSettings.setValue("devices",devices)
    }

    Python {
        id: python

        Component.onCompleted: {
            addImportPath(Qt.resolvedUrl('.'));

            setHandler('progress', function(ratio) {

                devices.push(ratio)
            });
            setHandler('finished', function(newvalue) {
                page.discovering = false;
                button.text = "Discover";
                if (retries<3 && devices.length === 0) {
                    retries = retries + 1
                    python.startDownload()
                } else {
                    retries = 0
                    for (var i = 0; i < devices.length; i++) {
                        getXml(devices[i])
                        console.log(devices[i]);
                    }
                }
            });

            importModule('upnpscan', function () {});

        }

        function startDownload() {
            devices = []
            page.discovering = true;
            button.text = "Discovering";
            call('upnpscan.discoverer.discover', function() {});
        }

        onError: {
            console.log('python error: ' + traceback);
        }

        onReceived: {
            console.log('got message from python: ' + data);
        }
    }

    Component.onCompleted: {
        python.startDownload();
    }
}