status-desktop/ui/app/AppLayouts/WalletV2/components/CollectibleDetailsPage.qml

import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13

import StatusQ.Components 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Core 0.1
import StatusQ.Controls 0.1

Item {
    id: collectiblesDetailContainer

    property var assetProperties
    property var assetRankings
    property var assetStats
    property int collectionIndex: -1

    function show(options) {
        collectibleHeader.image.source = options.collectibleImageUrl
        collectibleHeader.primaryText = options.name
        collectibleHeader.secondaryText = options.collectibleId

        collectibleimage.image.source = options.imageUrl
        collectibleText.text = options.description
        collectibleimage.color = options.backgroundColor
        assetProperties = options.properties
        assetRankings = options.rankings
        assetStats = options.stats
        collectionIndex = options.collectionIndex
    }

    function hide() {
        active = false
    }

    function getCollectionMaxValue(traitType, value, maxValue) {
        if(maxValue !== "")
            return parseInt(value) + qsTr(" of ") + maxValue
        else
            return parseInt(value) + qsTr(" of ") + walletV2Model.collectiblesView.collections.getCollectionTraitMaxValue(collectionIndex, traitType).toString()
    }

    CollectibleDetailsHeader {
        id: collectibleHeader
        anchors.right: parent.right
        anchors.rightMargin: 79
        anchors.left: parent.left
        anchors.leftMargin: 79
        anchors.top: parent.top
    }

    Item {
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.leftMargin: 83
        anchors.right: parent.right
        anchors.rightMargin: 78
        anchors.top: collectibleHeader.bottom
        anchors.topMargin: 46

        Row {
            id: collectibleImageDetails
            anchors.top: parent.top
            width: parent.width
            spacing: 24

            StatusRoundedImage {
                id: collectibleimage
                width: 253
                height: 253
                radius: 2
                color: "transparent"
                border.color: Theme.palette.directColor8
                border.width: 1
            }
            StatusBaseText {
                id: collectibleText
                width: parent.width - collectibleimage.width - 24
                height: collectibleimage.height

                text: qsTr("Collectibles")
                color: Theme.palette.directColor1
                font.pixelSize: 15
                lineHeight: 22
                lineHeightMode: Text.FixedHeight
                elide: Text.ElideRight
                wrapMode: Text.Wrap
            }
        }

        ListView {
            anchors.top: collectibleImageDetails.bottom
            anchors.topMargin: 32
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 20
            anchors.horizontalCenter: parent.horizontalCenter
            width: parent.width

            clip: true
            boundsBehavior: Flickable.StopAtBounds
            model: 3
            delegate: StatusExpandableItem {
                width: parent.width
                height: childrenRect.height
                anchors.horizontalCenter: parent.horizontalCenter

                primaryText: index === 0 ? qsTr("Properties") : index === 1 ? qsTr("Levels") : qsTr("Stats")
                type: StatusExpandableItem.Type.Tertiary
                expandableComponent: index === 0 ? properties : index === 1 ? rankings : stats
                visible: index === 0 ? (!!assetProperties ? assetProperties.rowCount() !== 0 : false) :
                         index === 1 ? (!!assetRankings ? assetRankings.rowCount() !== 0 : false) :
                                       (!!assetStats ? assetStats.rowCount() !== 0 : false)
            }
        }
    }

    Component {
        id: properties

        Flow {
            width: parent.width
            spacing: 10

            Repeater {
                model: assetProperties
                Rectangle {
                    id: containerRect
                    height: 52
                    width: 147
                    color: "transparent"
                    border.color: Theme.palette.baseColor2
                    border.width: 1
                    radius: 8
                    Column {
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.top: parent.top
                        anchors.topMargin: 6
                        StatusBaseText {
                            width: containerRect.width - 12

                            color: Theme.palette.baseColor1
                            font.pixelSize: 13
                            lineHeight: 18
                            lineHeightMode: Text.FixedHeight
                            elide: Text.ElideRight
                            horizontalAlignment: Text.AlignHCenter
                            text: model.traitType
                            font.capitalization: Font.Capitalize
                        }
                        StatusBaseText {
                            width: containerRect.width - 12

                            color: Theme.palette.directColor1
                            font.pixelSize: 15
                            lineHeight: 22
                            lineHeightMode: Text.FixedHeight
                            horizontalAlignment: Text.AlignHCenter
                            elide: Text.ElideRight
                            text: model.value
                        }
                    }
                }
            }
        }
    }

    // To-do change to progress bar one design is finalized
    Component {
        id: rankings

        Column {
            width: parent.width
            spacing: 10

            Repeater {
                model: assetRankings
                Rectangle {
                    anchors.horizontalCenter: parent.horizontalCenter
                    width: parent.width
                    height: 52
                    color: Theme.palette.baseColor4
                    StatusBaseText {
                        anchors.left: parent.left
                        anchors.leftMargin: 10
                        anchors.verticalCenter: parent.verticalCenter
                        color: Theme.palette.baseColor1
                        font.pixelSize: 15
                        lineHeight: 22
                        lineHeightMode: Text.FixedHeight
                        elide: Text.ElideRight
                        horizontalAlignment: Text.AlignLeft
                        text: model.traitType
                        font.capitalization: Font.Capitalize
                    }
                    StatusBaseText {
                        anchors.right: parent.right
                        anchors.rightMargin: 10
                        anchors.verticalCenter: parent.verticalCenter
                        color: Theme.palette.directColor1
                        font.pixelSize: 15
                        lineHeight: 22
                        lineHeightMode: Text.FixedHeight
                        horizontalAlignment: Text.AlignLeft
                        elide: Text.ElideRight
                        text: collectiblesDetailContainer.getCollectionMaxValue(model.traitType, model.value, model.maxValue)
                    }
                }
            }
        }
    }

    // To-do change to progress bar one design is finalized
    Component {
        id: stats

        Column {
            width: parent.width
            spacing: 10

            Repeater {
                model: assetStats
                Rectangle {
                    anchors.horizontalCenter: parent.horizontalCenter
                    width: parent.width
                    height: 52
                    color: Theme.palette.baseColor4
                    StatusBaseText {
                        anchors.left: parent.left
                        anchors.leftMargin: 10
                        anchors.verticalCenter: parent.verticalCenter
                        color: Theme.palette.baseColor1
                        font.pixelSize: 15
                        lineHeight: 22
                        lineHeightMode: Text.FixedHeight
                        elide: Text.ElideRight
                        horizontalAlignment: Text.AlignLeft
                        text: model.traitType
                        font.capitalization: Font.Capitalize
                    }
                    StatusBaseText {
                        anchors.right: parent.right
                        anchors.rightMargin: 10
                        anchors.verticalCenter: parent.verticalCenter
                        color: Theme.palette.directColor1
                        font.pixelSize: 15
                        lineHeight: 22
                        lineHeightMode: Text.FixedHeight
                        horizontalAlignment: Text.AlignLeft
                        elide: Text.ElideRight
                        text: collectiblesDetailContainer.getCollectionMaxValue(model.traitType, model.value, model.maxValue)
                    }
                }
            }
        }
    }
}