import QtQuick 2.9
import QtQuick.Controls 2.4
import QtGraphicalEffects 1.0
import "./components"

Popup {
    id: control

    modal: true
    dim: false

    scale: 0

    height: 300

    Rectangle {
        id: contentRect

        height: parent.height

        width: topImg.width * 0.836
        anchors.horizontalCenter: parent.horizontalCenter

        color: "white"

        Item {
            id: contentItm

            anchors {
                fill: parent
                topMargin: -topImg.anchors.bottomMargin
            }

            ListView {
                anchors.fill: parent

                model: ListModel {
                    ListElement {
                        iconSource: "qrc:/icons/cookie.png"
                        costIconSource: "qrc:/icons/cookie.png"
                        title: "Titel"
                        cost: "10"
                        levelLabel: "Level:"
                        level: "10"
                        useLabel: "Cps:"
                        use: "+10"
                    }
                    ListElement {
                        iconSource: "qrc:/icons/cookie.png"
                        costIconSource: "qrc:/icons/cookie.png"
                        title: "Titel2"
                        cost: "100"
                        levelLabel: "Level:"
                        level: "10"
                        useLabel: "Cps:"
                        use: "+10"
                    }
                    ListElement {
                        iconSource: "qrc:/icons/cookie.png"
                        costIconSource: "qrc:/icons/cookie.png"
                        title: "Titel3"
                        cost: "1000"
                        levelLabel: "Level:"
                        level: "10"
                        useLabel: "Cps:"
                        use: "+10"
                    }
                }

               delegate: ShopDelegate {
                   iconSource: model.iconSource
                   costIconSource: model.costIconSource
                   title: model.title
                   cost: model.cost
                   levelLabel: model.levelLabel
                   level: model.level
                   useLabel: model.useLabel
                   use: model.use
               }
            }
        }
    }

    Image {
        id: topImg

        anchors {
            bottom: contentRect.top
            bottomMargin: -height * 0.22
        }

        source: "qrc:/graphics/shopTop.png"
        fillMode: Image.PreserveAspectFit
        mipmap: true
        width: parent.width
    }

    Image {
        id: bottomImg

        anchors {
            top: contentRect.bottom
            topMargin: -height * 0.33
        }

        source: "qrc:/graphics/shopBottom.png"
        fillMode: Image.PreserveAspectFit
        mipmap: true
        width: parent.width
    }

    background: Rectangle {
        color: "transparent"
    }

    enter: Transition {
        NumberAnimation { properties: "scale"; to: 1; duration: 300; easing.type: Easing.Linear }
    }

    exit: Transition {
        NumberAnimation { properties: "scale"; to: 0; duration: 300; easing.type: Easing.Linear }
    }
}