Label_Image

import QtQuick 2.15
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0
import QtQuick.Controls 2.15
import "../../../../../../qml/common/components"
import "../../../../../../qml/mobile/forms/lobby/home/jackpot"

Item {
    id: backgroundJackpot

    property Gradient jackpotBorderGradient: jackpotBorderGradient

    property real backgroundRadius: 3
    property string listElementName: "cashtables"
    property color jackpotBackgroundColor: "red"

    implicitWidth: parent.width
    implicitHeight: 60

    ListModel {
        id: jackpotBackgroundModel

        ListElement {
            sourceIcon: "../../../../../../qml/mobile/forms/lobby/home/jackpot/image/monteCarlo/pict.png"
            colorOne:"#151515"
            colorTwo:"#001F18"
            colorThree:"#11542C"
            colorFor:"#001F18"
            colorFive: "#001F18"
        }
        ListElement {
            sourceIcon: "../../../../../../qml/mobile/forms/lobby/home/jackpot/image/badBeat/pict.png"
            colorOne: "#151515"
            colorTwo: "#08171E"
            colorThree: "#005B78"
            colorFor: "#08171E"
            colorFive: "#08171E"
        }
        ListElement {
            sourceIcon: "../../../../../../qml/mobile/forms/lobby/home/jackpot/image/smartBadBeat/pict.png"
            colorOne: "#151515"
            colorTwo: "#1F0000"
            colorThree: "#7C2306"
            colorFor: "#270000"
            colorFive: "#270000"
        }
        ListElement {
            sourceIcon: "../../../../../../qml/mobile/forms/lobby/home/jackpot/image/monteCarlo2/pict.png"
            colorOne: "#151515"
            colorTwo: "#00141F"
            colorThree: "#2F4376"
            colorFor: "#78172E"
            colorFive: "#250F17"
        }
    }

    Rectangle {
        id: backgroundShadow

        anchors.fill: parent

        layer.enabled: true
        layer.effect: RectangularGlow {
            anchors.fill: parent
            glowRadius: 8
            color: Qt.rgba(0, 0, 0, 0.5)
        }
    }

    SwipeView {
        id: backgroundJackpotSwipe

        currentIndex: homeJackpotForm.indexWindow
        anchors.fill: parent
        Layout.fillWidth: true

        ParallelAnimation {

            OpacityAnimator {

                target: backgroundJackpotSwipe
                from: 0.7;
                to: 1;
                duration: 200
            }

            ScaleAnimator {
                target: backgroundJackpotSwipe
                from: 1.5;
                to: 1;
                duration: 200
            }
            running: homeJackpotForm.indexWindow
        }

        Repeater {
            id: repeaterSwipeViewContent

            model: jackpotBackgroundModel

            Item {
                id: jackpotBackgroundComponent

                Rectangle {
                    id: jackpotBackground

                    width: parent.width
                    height: 52
                    anchors.right: parent.right
                    anchors.left: parent.left

                    anchors.rightMargin: 8
                    anchors.leftMargin: 8

                    anchors.verticalCenter: parent.verticalCenter

                    radius: backgroundRadius

                    color: "gray"

                    border.width: 2
                    border.color: "red"

//                    Loader {
//                        id: jackpotLoaderBorderGradient

//                        anchors.fill: parent
//                        active: jackpotBorderGradient
//                        sourceComponent: border
//                    }

                    Component.onCompleted: console.log( "Loader active: " + jackpotLoaderBorderGradient.active )

//                    Gradient {
//                        id: jackpotBorderGradient

//                        GradientStop{ position: 0.2; color: "#292D34" }
//                        GradientStop{ position: 0.4; color: "#26272C" }
//                        GradientStop{ position: 0.6; color: "#3F434B" }
//                        GradientStop{ position: 0.8; color: "#A19B75" }
//                        GradientStop{ position: 1.0; color: "#3B3E47" }
//                        GradientStop{ position: 1.0; color: "#25282F" }
//                    }

//                    Component {
//                        id: border

//                        Item {

//                            Rectangle {
//                                id: borderFill

//                                anchors.fill: parent
//                                radius: backgroundRadius
//                                gradient: backgroundJackpot.jackpotBorderGradient
//                                visible: true
//                            }

//                            Rectangle {
//                                id: backgroundBorder

//                                anchors.fill: parent
//                                radius: backgroundRadius
//                                border.width: 1
//                                color: "red"
//                                visible: true
//                            }

//                            OpacityMask {
//                                id: opM

//                                anchors.fill: parent
//                                source: borderFill
//                                maskSource: backgroundBorder
//                            }
//                        }
//                    }
                }

                LinearGradient {
                    id: jackpotBackgroundLinearGradient

                    anchors.fill: jackpotBackground
                    source: jackpotBackground

                    gradient: Gradient {

                        orientation: Gradient.Horizontal
                        GradientStop{ position: 0.2; color: model.colorOne }
                        GradientStop{ position: 0.4; color: model.colorTwo }
                        GradientStop{ position: 0.6; color: model.colorThree }
                        GradientStop{ position: 0.8; color: model.colorFor }
                        GradientStop{ position: 1.0; color: model.colorFor }
                    }
                }

                Image {
                    id: jackpotIcon

                    width: 100
                    height: 60

                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                    anchors.leftMargin: 11

                    source: model.sourceIcon

                }
            }
        }
    }

    MouseArea {

        anchors.fill: parent
        onClicked: {
            console.log("Pressed Label")
            timerFlippingContentJackpot.restart();
        }
    }
}