import QtQuick 2.0
import QtQuick.Controls 2.4
import QtQuick.Controls.Material 2.3

import "../Components"

Page {
    id: root

    title: "calendar"

    property string nation: ""
    property int status: -1

    Component.onCompleted: {
        loadData(root.nation)
    }

    function loadData(nation) {
        root.status = 905
        loadingDl.open()

        var ret = serverConn.getCalendar(nation)

        if(ret["status"] === 200){
            root.status = 200
            calendarList.listData = ret["data"]["competitions"]
        }
        else {
            root.status = ret["status"]
            calendarList.listData = {}
        }
        loadingDl.close()
    }

    DataListView {
        id: calendarList

        property var listData

        anchors.fill: parent

        //boundsBehavior: Flickable.StopAtBounds

        model: listData.length

        status: root.status

        onRefresh: {
            root.loadData(root.nation)
        }

        delegate: ItemDelegate {
            id: competitionDel

            property string name: calendarList.listData[index]["name"]
            property string date: calendarList.listData[index]["date_span"]
            property var cats: calendarList.listData[index]["cats"]
            property int catId: calendarList.listData[index]["cat_id"]

            width: parent.width
            height: compDelCol.height + 10

            onClicked: {
                catSelectPu.appear(index)
            }

            Rectangle {
                id: delBackroundRect

                anchors.fill: parent

                opacity: 0.5

                color: app.competitionCategoryColors[catId]

            }

            Column {
                id: compDelCol

                anchors.centerIn: parent

                width: parent.width * 0.97

                spacing: 10

                Label {
                    id: nameLa

                    width: parent.width

                    font.bold: true

                    wrapMode: Text.WordWrap

                    text: name
                }

                Label {
                    id: dateLa

                    color: "grey"

                    text: date
                }

                Label {
                    id: catIdLa

                    color: "grey"

                    text: catId
                }
            }

            Rectangle {
                id: bottomLineRa

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

                height: 1

                color: "lightgrey"

            }
        }
    }

    Dialog {
        id: catSelectPu

        property int index: -1
        property var catObj: calendarList.listData[catSelectPu.index] !== undefined ? calendarList.listData[catSelectPu.index]["cats"]:undefined

        x: root.width / 2 - width / 2
        y: root.height / 2 - height / 2

        width: root.width * 0.8
        height: root.height * 0.6

        modal: true
        focus: true

        title: qsTr("select category")

        function appear(index) {
            catSelectPu.open()
            catSelectPu.index = index
        }

        contentItem: ListView {
            id: catsLv

            width: parent.width
            height: root.height * 0.6

            model: catSelectPu.catObj !== undefined ? catSelectPu.catObj.length:0

            delegate: Button {
                id: catBt

                width: parent.width

                flat: true

                text: catSelectPu.catObj[index]["name"]

                onClicked: {
                    catSelectPu.close()
                    app.openResults(calendarList.listData[catSelectPu.index]["WetId"], catSelectPu.catObj[index]["GrpId"], (catSelectPu.catObj[index]["status"] === 4 || catSelectPu.catObj[index]["status"] === undefined))
                }
            }
        }

    }

}