import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Effects

import KomplexHub
import KomplexHub.Controls
import KomplexHub.Kero
import KomplexHubPlugin

Item
{
    property string uuid
    property string author
    property string authorUrl
    property string description
    property string thumbnail
    property string portrait
    property string landscape
    property string original
    property string fullScreen
    property string portraitSize
    property string landscapeSize
    property string fullScreenSize
    property string backgroundPortrait
    property string backgroundLandscape

    property int imageHeight
    property int imageWidth

    id: rootItem

    Rectangle
    {
        anchors.fill: parent
        color: palette.base

        Image
        {
            id: backgroundImage
            source: width > height ? backgroundLandscape : backgroundPortrait
            transform: Image.PreserveAspectCrop
            anchors.fill: parent
            visible: false
        }

        MultiEffect
        {
            anchors.fill: backgroundImage
            source: backgroundImage
            blurEnabled: true
            blurMax: 64
            blur: 1.0
            opacity: 0.25
            saturation: -0.8
        }

        ColumnLayout
        {
            anchors.fill: parent
            anchors.margins: Constants.largeMargin
            spacing: Constants.largeMargin

            RowLayout
            {
                Layout.fillWidth: true
                Layout.alignment: Qt.AlignTop| Qt.AlignHCenter
                Layout.topMargin: 32

                Rectangle
                {
                    Layout.fillWidth: true
                    Layout.preferredHeight: width / 1.77777777778
                    Layout.maximumWidth: 800
                    Layout.alignment: Qt.AlignHCenter
                    color: palette.base.darker()

                    Throbber
                    {
                        anchors.fill: parent
                        id: loadingThrobber
                        visible: viewImage.status === Image.Loading
                    }

                    Image
                    {
                        id: viewImage
                        anchors.fill: parent
                        transform: Image.PreserveAspectCrop
                        source: rootItem.thumbnail
                        visible: !(status === Image.Loading)
                    }
                }
            }

            Text
            {
                id: titleText
                text: rootItem.author
                color: palette.text
                font.bold: true
                font.pixelSize: Constants.h3Font.pixelSize
                elide: Text.ElideRight

                Layout.fillWidth: true
                Layout.alignment: Qt.AlignTop| Qt.AlignLeft
            }

            Text
            {
                id: descriptionText
                text: rootItem.description
                color: palette.text
                font.pointSize: Constants.h4Font.pixelSize
                wrapMode: Text.WrapAtWordBoundaryOrAnywhere

                Layout.alignment: Qt.AlignTop| Qt.AlignLeft
                Layout.fillWidth: true
            }

            /** Spacer **/
            Item
            {
                Layout.fillWidth: true
                Layout.preferredHeight: 32
            }

            Text
            {
                text: qsTr("Available Downloads")
                color: palette.text
                font.bold: true
                font.pixelSize: Constants.h3Font.pixelSize
                elide: Text.ElideRight

                Layout.fillWidth: true
                Layout.alignment: Qt.AlignTop| Qt.AlignLeft
            }

            RowLayout
            {
                Layout.fillWidth: true

                ComboBox
                {
                    id: downloadSelector
                    model:[
                        "Screen (" + fullScreenSize + ")",
                        "Portrait (" + portraitSize + ")",
                        "Landscape (" + landscapeSize + ")"
                    ]
                    Layout.fillWidth: true
                    Layout.preferredHeight: 36
                }
                SquareButton
                {
                    Layout.preferredHeight: 36
                    Layout.preferredWidth: 128
                    text: qsTr("Download")
                    icon.source: "qrc:/images/icons/icons8-download.svg"
                }
            }

            /** Spacer **/
            Item { Layout.fillWidth: true; Layout.fillHeight: true }

            RowLayout
            {
                Layout.fillWidth: true
                Layout.alignment: Qt.AlignBottom

                Text {
                    text: qsTr("Images Provided Courtesy of Pexels")
                    elide: Text.ElideLeft
                    color: palette.text
                    font.bold: true
                    font.pixelSize: Constants.h6Font.pixelSize

                    Layout.fillWidth: true
                    Layout.alignment: Qt.AlignLeft
                }

                Image
                {
                    transform: Image.PreserveAspectFit
                    source: "qrc:/images/icons/pexels-icon-filled-256.svg"

                    Layout.alignment: Qt.AlignRight
                    Layout.preferredHeight: 32
                    Layout.preferredWidth: 32
                }
            }
        }
    }
}