import QtQuick 2.0
import QtQuick.Controls 2.4
import QtGraphicalEffects 1.0

import "../Components"

Page {
    id: root

    title: root.rankingData[compNameKey]
    property string subTitle: getSubtitle()
    property bool titleIsPageTitle: true

    property int status: -1

    property bool debug: true

    property int comId: -1
    property int catId: -1
    property int routeNumber: -2
    property bool reg: false

    property var rankingData

    property string listKey: root.reg ? "athletes":"participants"
    property string compNameKey: root.reg ? "name":"comp_name"

    Component.onCompleted: {
        root.loadData(root.comId, root.catId, root.reg, root.routeNumber)
    }

    function loadData(comp, cat, reg, route){
        root.status = 905
        loadingDl.open()
        console.log("[info][QML] getting ranking data of comp: " + comp + " and cat: " + cat + " reg: " + reg)
        var ret = serverConn.getRanking(comp, cat, reg, route)

        root.status = ret["status"]

        if(parseInt(ret["status"]) === 200){
            // request was successfull -> prepare data
            if(root.reg){
                // if the data i sregistration data, athletes of other cats need to be removed

                var validAthletes = []

                for(var i = 0; i < ret["data"]["athletes"].length; i++){
                    if(parseInt(ret["data"]["athletes"][i]["cat"]) === cat){
                        //console.log("found matching athlete at " + i)
                        validAthletes.push(ret["data"]["athletes"][i])
                    }
                }
                ret["data"]["athletes"] = validAthletes

                root.rankingData = ret["data"]
            }
            else {
                root.rankingData = ret["data"]
                root.routeNumber = root.rankingData["route_order"] === undefined ? -2:root.rankingData["route_order"]
            }
        }
        else {
            root.rankingData = {}
        }


        if((ret["data"][ root.listKey ] === undefined || ret["data"][ root.listKey ].length < 1) && ( root.status === 200 || root.status === 404 ) ){
            root.status = 901
        }

        console.log("done! status: " + root.status)
        loadingDl.close()
    }

    function getSubtitle() {
        var titleString

        //console.log("getting title, reg: " + root.reg)

        if(reg){
            for(var i = 0; i < root.rankingData["categorys"].length; i ++ ){
                //console.log("checking " + i + ": cat: " + parseInt(root.rankingData["categorys"][i]["GrpId"]) + " searched cat: " + root.catId)
                if(parseInt(root.rankingData["categorys"][i]["GrpId"]) === root.catId){
                    titleString = root.rankingData["categorys"][i]["name"]
                }
            }
        }
        else {
            titleString = root.rankingData["route_name"]
        }

        return titleString

    }

    Item {
        id: regItm
        // item for registration view

        anchors.fill: parent

        visible: root.reg

        RegistrationView {
            id: regViewRv

            anchors.fill: parent

            status: root.status

            listData: root.reg ? root.rankingData:({})

            onRefresh: {
                root.loadData(root.comId, root.catId, root.reg, root.routeNumber)
            }
        }
    }

    Item {
        id: rankItm
        // item for ranking data

        anchors.fill: parent

        visible: !root.reg

        RankingView {
            id: rankViewRv

            anchors {
                left: parent.left
                right: parent.right
                top: parent.top
                bottom: routeSelectTb.top
            }

            height: root.height - routeSelectTb.height

            status: root.status

            listData: root.reg ? ({}):root.rankingData

            onRefresh: {
                root.loadData(root.comId, root.catId, root.reg, root.routeNumber)
            }
        }

        RectangularGlow {
            id: toolBarEffect
            glowRadius: 3
            spread: 0.2
            color: "black"
            opacity: 0.3
            anchors.fill: routeSelectTb
        }

        TabBar {
            id: routeSelectTb

            property var tabs: getTabs()
            property var tabIndexes: []

            anchors {
                left: parent.left
                right: parent.right
                bottom: parent.bottom
            }

            height:  tabs.length > 0 ? 50:0

            position: TabBar.Footer

            Component.onCompleted: {
                //currentIndex = getIndex(root.routeNumber)
                setCurrentIndex(getIndex(root.routeNumber))
            }

            function getTabs() {

                var obj = root.rankingData["route_names"]
                var buttonData = []

                for(var prop in obj) {
                    // go through the whole array and search for data keys
                    if (obj.hasOwnProperty(prop)) {
                        buttonData.push([prop, obj[prop]])
                        console.log("found " + obj[prop] + " at index " + prop)
                    }
                }

                buttonData.sort(function(a, b) {
                    return a[0] - b[0];
                });

                return buttonData
            }

            function getIndex(routeNumber) {
                console.log("getting index for route number: " + routeNumber)

                for(var i = 0; i < tabs.length; i++){
                    //console.log(tabs[i])
                    if(parseInt(tabs[i][0]) === routeNumber){
                        console.log("found index: " + i)
                        return i
                    }
                }


                return 0
            }

            Repeater {
                id: routeSelectButtonRep

                model: routeSelectTb.tabs.length

                onModelChanged: {
                    routeSelectTb.setCurrentIndex(routeSelectTb.getIndex(root.routeNumber))
                }

                delegate: TabButton {
                    text: routeSelectTb.tabs[index][1]

                    width: Math.max(150, routeSelectTb.width / routeSelectButtonRep.model) //text.length * font.pixelSize



                    onClicked: {
                        console.log("changing to index: " + index + " (" + routeSelectTb.tabs[index][0] + ", " + routeSelectTb.tabs[index][1] + ")")
                        if(root.routeNumber !== routeSelectTb.tabs[index][0]){
                            root.routeNumber = routeSelectTb.tabs[index][0]
                            root.loadData(root.comId, root.catId, root.reg, root.routeNumber)
                        }
                    }
                }
            }
        }
    }
}