import QtQuick 2.9
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.3

ItemDelegate {
    id: competitionDel

    property bool over
    property var thisData: control.widgetData["competitions"][index]

    property string name: thisData["name"]
    property string date: thisData["date_span"]
    property var cats: thisData["cats"]
    property int catId: thisData["cat_id"] === undefined ? 0:thisData["cat_id"]

    property bool thisIsFavored: control.compFavorites.indexOf(parseInt(thisData['WetId'])) >= 0
    property bool includedByFavorites: control.displayedCompCats.indexOf(-1) >= 0 && thisIsFavored
    property bool includedByFilter: control.displayedCompCats.indexOf(parseInt(thisData['cat_id'])) >= 0
    property bool thisIsVisible: includedByFavorites || includedByFilter

    function updateVisibility() {
        competitionDel.includedByFilter = control.displayedCompCats.indexOf(parseInt(competitionDel.thisData['cat_id'])) >= 0
        competitionDel.thisIsFavored = control.compFavorites.indexOf(parseInt(thisData['WetId'])) >= 0
        competitionDel.includedByFavorites = control.displayedCompCats.indexOf(-1) >= 0 && thisIsFavored
    }

    width: control.width
    height: thisIsVisible ? compDelCol.height + 10 : 0

    enabled: ((thisData["cats"] !== undefined && thisData["cats"].length > 0) || competitionDel.thisData["homepage"] !== undefined || getCompInfoUrls(index).length > 0) && height > 0
    //visible: includedByFilter

    opacity: 0
    scale: 0.9

    Connections {
        target: control
        function onDisplayedCompCatsChanged() {
            competitionDel.updateVisibility()
        }

        function onCompFavoritesChanged() {
            competitionDel.updateVisibility()
        }
    }

    onThisDataChanged: {
        if(thisIsVisible){
            fadeInPa.start()
        }
    }

    onThisIsVisibleChanged: {
        if(thisIsVisible){
            fadeInPa.start()
        }
        else {
            fadeOutPa.start()
        }
    }

    Behavior on height {
        NumberAnimation {
            duration: 400
        }
    }

    onClicked: {
        control.openComp(index)
    }

    ParallelAnimation {
        id: fadeInPa
        NumberAnimation { target: competitionDel; property: "opacity"; from: 0; to: 1.0; duration: 400 }
        NumberAnimation { target: competitionDel; property: "scale"; from: 0.8; to: 1.0; duration: 400 }
    }

    ParallelAnimation {
        id: fadeOutPa
        NumberAnimation { target: competitionDel; property: "opacity"; from: 1; to: 0; duration: 400 }
        NumberAnimation { target: competitionDel; property: "scale"; from: 1; to: 0.8; duration: 400 }
    }

    Rectangle {
        id: delBackroundRect

        anchors.fill: parent

        opacity: 0.5

        color: control.getCompCatData(catId) === undefined ? "white":control.getCompCatData(catId)["bgcolor"]
    }

    Column {
        id: compDelCol

        anchors.centerIn: parent

        width: parent.width * 0.97

        spacing: 10

        RowLayout {
            width: parent.width
            Label {
                id: nameLa

                width: parent.width
                Layout.fillWidth: true

                font.bold: true
                wrapMode: Text.WordWrap

                text: name

            }

            ToolButton {
                id: bookmarkTb
                icon.name: competitionDel.thisIsFavored ? "pinFilled":"pin"
                onClicked: {
                    control.editFavorites(!competitionDel.thisIsFavored, parseInt(thisData['WetId']))
                }

                Layout.alignment: Layout.Right

                Behavior on icon.name {
                    SequentialAnimation {
                        NumberAnimation {
                            property: "scale"
                            target: bookmarkTb
                            duration: 75
                            to: 0.8
                        }
                        NumberAnimation {
                            property: "scale"
                            target: bookmarkTb
                            duration: 75
                            to: 1
                        }
                    }
                }
            }
        }

        Label {
            id: dateLa

            color: "grey"

            text: date
        }
    }

    Rectangle {
        id: bottomLineRa

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

        height: 1

        color: "lightgrey"

    }
}