import QtQuick 2.14
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

import utils 1.0
import shared.controls 1.0

import "../../stores"
import "../../controls"

Item {
    id: root

    property var currentCollectible: RootStore.currentCollectible
    readonly property int isNarrowMode : width < 700

    CollectibleDetailsHeader {
        id: collectibleHeader
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        asset.name: currentCollectible.collectionImageUrl
        asset.isImage: true
        primaryText: currentCollectible.collectionName
        secondaryText: currentCollectible.id
        isNarrowMode: root.isNarrowMode
        networkName: currentCollectible.networkName
        networkColor: currentCollectible.networkColor
        networkIconURL: currentCollectible.networkIconUrl
    }

    ColumnLayout {
        id: collectibleBody
        anchors.top: collectibleHeader.bottom
        anchors.topMargin: 25
        anchors.left: parent.left
        anchors.leftMargin: root.isNarrowMode ? 0 : 52
        anchors.right: parent.right
        anchors.bottom: parent.bottom

        spacing: Style.current.padding

        Row {
            id: collectibleImageDetails
            Layout.preferredHeight: root.isNarrowMode ? 152 : collectibleimage.height
            Layout.preferredWidth: parent.width
            spacing: 24

            StatusRoundedImage {
                id: collectibleimage
                readonly property int size : root.isNarrowMode ? 132 : 253
                width: size
                height: size
                radius: 2
                color: currentCollectible.backgroundColor
                border.color: Theme.palette.directColor8
                border.width: 1
                image.source: currentCollectible.imageUrl
            }

            Column {
                id: collectibleNameAndDescription
                spacing: 12

                width: parent.width - collectibleimage.width - Style.current.bigPadding

                StatusBaseText {
                    id: collectibleName
                    width: parent.width
                    height: 24

                    text: currentCollectible.name
                    color: Theme.palette.directColor1
                    font.pixelSize: 17
                    lineHeight: 24
                    elide: Text.ElideRight
                    wrapMode: Text.WordWrap
                }

                StatusScrollView {
                    id: descriptionScrollView
                    width: parent.width
                    height: collectibleImageDetails.height - collectibleName.height - parent.spacing

                    contentWidth: availableWidth
                    contentHeight: descriptionText.height

                    padding: 0
                    
                    StatusBaseText {
                        id: descriptionText
                        width: descriptionScrollView.availableWidth

                        text: currentCollectible.description
                        textFormat: Text.MarkdownText
                        color: Theme.palette.directColor4
                        font.pixelSize: 15
                        lineHeight: 22
                        lineHeightMode: Text.FixedHeight
                        elide: Text.ElideRight
                        wrapMode: Text.Wrap
                    }
                }
            }
        }

        StatusTabBar {
            id: collectiblesDetailsTab
            Layout.fillWidth: true
            Layout.topMargin: root.isNarrowMode ? 0 : Style.current.xlPadding
            visible: currentCollectible.properties.count > 0

            StatusTabButton {
                leftPadding: 0
                width: implicitWidth
                text: qsTr("Properties")
            }
        }

        StatusScrollView {
            id: scrollView
            Layout.fillWidth: true
            Layout.fillHeight: true
            Flow {
                width: scrollView.availableWidth
                spacing: 10
                Repeater {
                    model: currentCollectible.properties
                    InformationTile {
                        maxWidth: parent.width
                        primaryText: model.traitType
                        secondaryText: model.value
                    }
                }
            }
        }
    }
}