import QtQuick 6.8
import QtQuick.Controls 6.8
import QtQuick.Layouts 6.8

import QYRComponents 1.0

Rectangle {
    anchors.margins: 10

    width: 384
    height: 224
    color: area.containsMouse ? Colors.surface1 : Colors.surface0
    radius: 10

    required property string name
    required property string id
    required property var metadata

    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 5

        Image {
            Layout.fillWidth: true
            Layout.fillHeight: true
            asynchronous: true
            cache: true
            source: "https://youvideo.nonamesoft.xyz/thumbnails/" + parent.parent.id
            fillMode: Image.PreserveAspectFit

            onStatusChanged: if (status == Image.Error) {
                source = "https://youvideo.nonamesoft.xyz/thumbnails/audio.png";
                children[0].visible = true
            }

            // This is a fucking mess
            Label {
                visible: false
                anchors.fill: parent
                heading: "h3"
                font.bold: true
                text: parent.parent.parent.name
                wrapMode: Text.Wrap
                clip: true
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }

            Rectangle {
                anchors.bottom: parent.bottom
                anchors.left: parent.left
                color: Colors.background

                width: children[0].paintedWidth
                height: children[0].paintedHeight

                Label {
                    anchors.fill: parent
                    heading: "h4"
                    // text: new Date(parent.parent.parent.parent.metadata.duration * 1000).toISOString().slice(11, 19)
                }
            }
        }

        Label {
            heading: "h3"
            font.bold: true
            text: parent.parent.name
            Layout.fillWidth: true
            clip: true
        }
    }

    MouseArea {
        anchors.fill: parent
        id: area
        hoverEnabled: true
        onClicked: stack.openVideo(parent.id)
    }
}