import QtQuick 2.0
import Ubuntu.Components 1.1
import QtMultimedia 5.2
//import Ubuntu.Components.Pickers 1.0
import Ubuntu.Components.ListItems 1.0 as ListItem

MainView {
    objectName: "mainView"
    applicationName: "lautfm.ogra"

    useDeprecatedToolbar: false

    width: units.gu(100)
    height: units.gu(75)
    backgroundColor: UbuntuColors.coolGrey

    property string running_stream: ""
    property string list_source: "http://api.laut.fm/stations?limit=300"
    property string list_query: "$"
    property string current_source: ""
    property string current_query: ""
    property string playing_station: ""
    property int track_length: 0
    property int track_time_sec: 0
    property int track_offset: 0

    ListModel {
        id: currentSongModel
    }

    PageStack {
            id: pageStack
            Component.onCompleted: push(rootPage)
    Page {
        id: rootPage
        title: i18n.tr("laut.fm")

        Component.onCompleted: stationlist.refresh()

        JSONListModel {
            id: stationlist
            source: list_source
            query: list_query
        }

        JSONListModel {
            id: current
            source: current_source
            query: current_query
            onListModelUpdateChanged: {
                title.text = "Title: <b>" + model.get(0).title + "</b>";
                artist.text = "Artist: <b>" + model.get(0).artist.name + "</b>";
                if (model.get(0).length != track_length) {
                    track_length = model.get(0).length;
                    track_time_sec = 0;
                }
            }
        }

        function setCurrent() {
            if (running_stream.length != 0) {
                current_source = "http://api.laut.fm/station/" + playing_station + "/current_song";
                current_query = "$";
                current.refresh();
            }
        }

        function toggleButton() {
            if (player.playbackState == 0 && running_stream.length != 0) {
                setCurrent();
                player.play();
                playbtn.source = "pause.png";
                refreshTimer.start();
                playTimer.start();
            }
            else {
                player.stop();
                playbtn.source = "play.png";
                refreshTimer.stop();
                playTimer.stop();
            }
        }

        function doSearch() {
            rootPage.state = "default"
            if (searchfield.text == "") {
                list_source = "http://api.laut.fm/stations?limit=300"
                list_query = "$"
            }
            else {
                list_source = "http://api.laut.fm/search/stations?query=" + searchfield.text + "&limit=1000"
                list_query = "$...station"
            }
            stationlist.refresh()
            searchfield.text = ""
        }

        Audio {
            id: player
            source: running_stream
        }

        function pad(number, length) {
            var str = '' + number;
            while (str.length < length) {
            str = '0' + str;
            }
            return str;
        }

        function normalize(seconds) {
            var m = Math.floor((seconds % 3600) / 60);
            var s = seconds % 60;
            var str = m + ":" + pad(s, 2);
            return str;
        }

        head {
            sections {
                model: ["last", "favorites", "genres", "all"]
            }
        }

        state: "default"
        states: [
            PageHeadState {
                name: "default"
                head: rootPage.head
                actions: Action {
                    iconName: "search"
                    onTriggered: rootPage.state = "search"
                }
            },
            PageHeadState {
                id: headerState
                name: "search"
                head: rootPage.head
                actions: [
                    Action {
                        id: searchAction
                        //iconSource: "./lautfm-trans.png"
                        iconName: "search"
                        onTriggered: {
                            rootPage.state = "default"
                        }
                    }
                ]
                backAction: Action {
                    id: leaveSearchAction
                    text: "back"
                    iconName: "back"
                    onTriggered: rootPage.state = "default"
                }
                contents: TextField {
                    id: searchfield
                    placeholderText: "artist/song/station ..."
                    onAccepted: rootPage.doSearch(searchfield)
                }
            }
        ]

        Component {
            id: stationComponent
            ListItem.Standard {
                iconSource: images.station_80x80
                text: "<b>" + name + "</b><br>" + description
                onClicked: {
                    player.stop();
                    running_stream = stream_url;
                    stationname.text = "Station: <b>" + name + "</b>";
                    playing_station = name;
                    track_time_sec = 0;
                    rootPage.toggleButton();
                }
            }
        }

//        Component {
//            id: genreComponent
//            ListItem.Standard {
//                iconSource: images.station_80x80
//                text: "<b>" + name + "</b><br>" + description
//                onClicked: {
//                    player.stop();
//                    running_stream = stream_url;
//                    stationname.text = "Station: <b>" + name + "</b>";
//                    rootPage.toggleButton();
//                }
//            }
//        }

        Column {
            id: content
            anchors {
                //fill: parent
                top: parent.top
                left: parent.left
                right: parent.right
                bottom: control.top
            }
            UbuntuListView {
                id: myView
                //height: parent.height
                width: parent.width
                clip: true
                model: stationlist.model
                cacheBuffer: contentHeight

                //delegate: listSearch? searchComponent : stationComponent
                delegate: stationComponent
            }
        }

//        Column{
//            id: playerview
//            anchors {
//                bottom: control.top
//                top: content.bottom
//                left: parent.left
//                right: parent.right
//            }
//            height: units.gu(1)
//            width: parent.width
//            //visible: false
//        }

        Column{
            id: control
            anchors {
                bottom: parent.bottom
                left: parent.left
                right: parent.right
             }
            Rectangle {
                width: parent.width
                height: units.gu(10)
                color: "black"
                opacity: 0.9
                Label {
                   id: stationname
                   anchors.left: parent.left
                   anchors.top: parent.top
                   anchors.leftMargin: units.gu(12)
                   anchors.topMargin: units.gu(2)
                   text: "<b>Please select a station</b>"
                }
                Label {
                   id: artist
                   anchors.left: parent.left
                   anchors.top: parent.top
                   anchors.leftMargin: units.gu(12)
                   anchors.topMargin: units.gu(4)
                   text: "Artist:"
                }
                Label {
                   id: title
                   anchors.left: parent.left
                   anchors.top: parent.top
                   anchors.leftMargin: units.gu(12)
                   anchors.topMargin: units.gu(6)
                   text: "Title:"
                }
                Label {
                   id: time
                   anchors.right: parent.right
                   anchors.bottom: parent.bottom
                   anchors.rightMargin: units.gu(1)
                   font.pixelSize: units.gu(1)
                   text: rootPage.normalize(track_time_sec) + " - " + rootPage.normalize(track_length)
                }

                MouseArea {
                   width: units.gu(10)
                   height: units.gu(10)
                   anchors.leftMargin: units.gu(2)
                   id: button
                   Image {
                       width: units.gu(8)
                       height: units.gu(8)
                       anchors.verticalCenter: parent.verticalCenter
                       anchors.left: parent.left
                       anchors.leftMargin: units.gu(2)
                       id: playbtn
                       source: "play.png"
                   }
                   onClicked: {
                       rootPage.toggleButton();
                   }
                }
            }
            Timer {
                id: refreshTimer
                interval: 10000; running: false; repeat: true;
                onTriggered: rootPage.setCurrent();
            }
            Timer {
                id: playTimer
                running: false; repeat: true;
                onTriggered: {
                    track_time_sec++;
                    console.warn(track_time_sec + " length: " + track_length);
                }
            }
           // playMusic.source = "http://stream.laut.fm/telecaster";
        }
    }
    }
}