import QtQuick 2.5
import QtQuick.Layouts 1.2

import Gamblify.Gui 1.0
import Gamblify.Betting 1.0
import Gamblify.HelperFunctions 1.0

import "../entries_live"
import "../entries_market"

Item {
    id: root

    property int spacing: 15

    property var componentWidth: {
        "startTime" : 0,
                "eventName": 0,
                "score": 0,
                "count": 0
    }
    property string title: "undefined"

    property bool marketEnabled: true
    property bool producerDown: false
    property var selectedBetEntries: []
    property var startTime: 0
    property var score: null
    property bool overviewScreen: false
    property string eventId: ""
    property string eventStatus: ""

    // Kind of silly, but it's present in the JSON data, despite the API call is 'live'
    property bool isLive: false
    property string sportId: ""
    property bool isFavorite: false
    property bool disableLivescore: false

    //    property var marketList: []
    property var betData: []
    property string marketName: ""

    signal betOfferClicked(var outcomeData)
    signal childClicked()
    signal favoriteClicked()
    signal favoriteRemoveClicked()

    function getMatchStatus(score) {
        if (score.status === "Not Started") {
            return "MATCH_ABOUT_TO_START";
        }

        if (score.status === "ended") {
            return "MATCH_ENDED";
        }

        if (score.status === null) {
            return "NO_DATA";
        }

        return "MATCH_ON";
    }

    function getTotalScore(score){
        score = score.slice(1,-1);
        var scoreArray = score.split(",");
        var totalScore = 0;
        for(var i = 0; i<scoreArray.length; i++){
            totalScore = totalScore + parseInt(scoreArray[i]);
        }
        return totalScore;
    }

    RowLayout {

        anchors {
            fill: parent
            rightMargin: root.spacing
            leftMargin: root.spacing
        }

        spacing: root.spacing

        //            GradientButton {
        //                id: favoriteButton

        //                height: parent.height
        //                width: parent.width * root.componentWidth["star"]

        //                FavoritesStar {
        //                    anchors.fill: parent
        //                    anchors.margins: 10

        //                    type: root.isFavorite === true ? "ACTIVE" : "DEFAULT"
        //                }

        //                onClicked: root.isFavorite === true ? root.favoriteRemoveClicked() : root.favoriteClicked();
        //            }

        GradientButton {
            id: titleContainer

            Layout.fillHeight: true
            Layout.preferredWidth: root.width * (root.componentWidth["startTime"] + root.componentWidth["eventName"])

            onClicked: {
                root.childClicked();
            }

            RowLayout {
                id: rowLayout

                anchors {
                    fill: parent
                    leftMargin: root.spacing
                }

                RowLayout {
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                    spacing: root.spacing

                    Item {
                        id: startTime

                        Layout.fillHeight: true
                        Layout.preferredWidth: startTimeText.paintedWidth

                        Gilroy {
                            id: startTimeText
                            height: parent.height
                            width: parent.width

                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter

                            font.pointSize: 10

                            color: "#8892B5"

                            text: {
                                return Util.getStartTimeOrDate(root.startTime);
                            }
                        }
                    }

                    Item {
                        id: liveE
                        Layout.preferredWidth:liveEmblem.childrenRect.width
                        Layout.preferredHeight: liveEmblem.childrenRect.height
                        LiveEmblem {
                            id: liveEmblem
                            visible: root.isLive === true
                        }
                    }

                    Item {
                        Layout.fillHeight: true
                        Layout.fillWidth: true
                        //                        width: root.width * 0.3
                        Gilroy {
                            id: titleText

                            //                        height: parent.height
                            //                        width: parent.width
                            anchors.fill: parent

                            font.pointSize: 12

                            //                        anchors.left: root.isLive === true ? liveEmblem.right : parent.left
                            //                        anchors.leftMargin: 15

                            horizontalAlignment: Text.AlignLeft
                            verticalAlignment: Text.AlignVCenter

                            color: "white"

                            text: root.title
                            elide: Text.ElideRight
                        }
                    }
                }


                Item {
                    id: arrowToRight
                    Layout.preferredHeight: childrenRect.height
                    Layout.preferredWidth: parent.width * 0.10

                    Arrow {
                        visible: !overviewScreen

                        width: 15
                        height: 15

                        rotation: 180
                    }
                }
            }

        }

        // TODO: ENABLE WHEN WE GET LIVE SCORES
        //        Item {
        //            id: score

        //            Layout.fillHeight: true
        //            Layout.preferredWidth: root.isOutright ? 0 : parent.width * root.componentWidth["score"]

        //            Loader {
        //                id: liveSportMessageLoader

        //                anchors.fill: parent

        //                    sourceComponent: {
        //                        if(root.disableLivescore) return undefined;
        //                sourceComponent: {
        //                    if(root.isOutright) return undefined;

        //                    var matchStatus = getMatchStatus(root.score);
        //                    // If the sport simply has no score information, abort everything
        //                    if (matchStatus !== "MATCH_ON") {
        //                        return liveMessageNoScoreData;
        //                    }


        //                    switch (MarketHelper.getSportNameBySportId(root.sportId)) {

        //                    case "SOCCER":
        //                        return liveMessageSoccer;

        //                    case "ICE_HOCKEY":
        //                        return liveMessageSoccer; // They have the same signature at the moment

        //                    default:
        //                        return liveMessageGeneric;
        //                    }
        //                }
        //            }
        //        }


        Item {
            id: betButtons
            Layout.fillHeight: true
            Layout.fillWidth: true

            Loader {
                id: betButtonLoader

                anchors.fill: parent

                sourceComponent: {
                    if (root.betData.length <= 0) {
                        return noDataMessage;
                    }
                    return betButtonCollection;
                }
            }

            Component {
                id: betButtonCollection

                // This is modeled after LiveMessageGeneric.qml, so if you update that, update this too
                ColumnLayout {
                    anchors.fill: parent
                    spacing: 0


                    //                    LiveMessageBackground {
                    //                        Layout.preferredHeight: root.height * 0.25
                    //                        Layout.fillWidth: true
                    //                        visible: !root.isOutright

                    //                        Item {
                    //                            anchors.fill: parent

                    //                            Gilroy {
                    //                                anchors.fill: parent
                    //                                anchors.leftMargin: 5

                    //                                verticalAlignment: Text.AlignVCenter

                    //                                font.capitalization: Font.AllUppercase
                    //                                font.pointSize: 7

                    //                                color: "white"
                    //                                text: root.marketName
                    //                            }

                    //                        }
                    //                    }
                    BetButtonCollection {
                        Layout.fillHeight: true
                        Layout.fillWidth: true
                        spacing: root.spacing

                        marketEnabled: root.marketEnabled
                        producerDown: root.producerDown
                        overviewScreen: root.overviewScreen
                        eventId: root.eventId

                        selectedBetEntries: root.selectedBetEntries
                        onBetOfferClicked: {
                            root.betOfferClicked(outcomeData);
                        }
                        betData: root.betData
                    }
                }


            }
        }

        Component {
            id: noDataMessage

            LiveMessageBackground {
                anchors.fill: parent

                Gilroy {
                    anchors.centerIn: parent

                    font.capitalization: Font.AllUppercase
                    font.pointSize: 10

                    color: "darkgrey"

                    text: qsTr("Waiting for data") + trM.e
                }
            }
        }
    }
}

//Component {
//    id: liveMessageNoScoreData

//    LiveMessageNoScoreData {
//        anchors.fill: parent

//        status: getMatchStatus(root.score);
//        score: root.score
//    }
//}

//Component {
//    id: liveMessageGeneric

//    LiveMessageGeneric {
//        anchors.fill: parent

//        homeScore: root.getTotalScore(root.score.homeScores)
//        awayScore: root.getTotalScore(root.score.awayScores)
//        score: root.score
//    }
//}

//Component {
//    id: liveMessageSoccer

//    LiveMessageSoccer {
//        anchors.fill: parent

//        score: root.score
//    }
//}
//}