import QtQuick
import Nebula.UI

Item {
    id: root

    property string variant: "tile"
    property var item
    signal selected(var item)

    readonly property bool rowVariant: variant === "row"
    readonly property int iconSize: rowVariant ? 32 : (variant === "recent" ? 32 : 40)
    readonly property int glyphSize: rowVariant ? 16 : 18
    readonly property string iconName: item && item.iconName ? item.iconName : ""
    readonly property string fallbackGlyph: {
        if (item && item.glyph)
            return item.glyph
        if (item && item.kind)
            return item.kind
        return "application"
    }
    readonly property url iconSource: iconName.length > 0
        ? ("image://desktopicon/" + encodeURIComponent(iconName))
        : ""

    implicitWidth: rowVariant ? parent ? parent.width : 200 : 90
    implicitHeight: rowVariant ? 48 : 78
    Accessible.role: Accessible.Button
    Accessible.name: item ? item.name : ""
    Accessible.onPressAction: root.selected(item)

    Rectangle {
        anchors.fill: parent
        radius: Theme.radiusMedium
        color: hover.containsMouse ? Theme.tileHover : "transparent"

        Behavior on color {
            ColorAnimation {
                duration: Theme.animationFast
            }
        }
    }

    Column {
        visible: !root.rowVariant
        anchors.fill: parent
        anchors.topMargin: 10
        anchors.bottomMargin: 8
        anchors.leftMargin: 6
        anchors.rightMargin: 6
        spacing: 8

        Rectangle {
            width: root.iconSize
            height: root.iconSize
            radius: root.variant === "recent" ? 9 : 11
            anchors.horizontalCenter: parent.horizontalCenter
            color: Theme.iconWell

            Rectangle {
                anchors.fill: parent
                radius: parent.radius
                color: "transparent"
                border.color: Theme.iconWellHighlight
                border.width: 1
            }

            Image {
                id: tileIcon
                anchors.centerIn: parent
                width: root.iconSize - 8
                height: root.iconSize - 8
                fillMode: Image.PreserveAspectFit
                asynchronous: true
                smooth: true
                cache: true
                visible: status === Image.Ready
                source: root.iconSource
            }

            NebulaIcon {
                anchors.centerIn: parent
                visible: tileIcon.status !== Image.Ready
                name: root.fallbackGlyph
                size: root.glyphSize
                color: item && item.tint ? item.tint : Theme.accent
            }
        }

        Text {
            width: parent.width
            text: item ? item.name : ""
            color: Theme.textPrimary
            font.family: Theme.fontFamily
            font.pixelSize: Theme.fontSizeApp
            elide: Text.ElideRight
            horizontalAlignment: Text.AlignHCenter
        }
    }

    Row {
        visible: root.rowVariant
        anchors.fill: parent
        anchors.margins: 8
        spacing: 10

        Rectangle {
            width: root.iconSize
            height: root.iconSize
            radius: 9
            anchors.verticalCenter: parent.verticalCenter
            color: Theme.iconWell

            Image {
                id: rowIcon
                anchors.centerIn: parent
                width: root.iconSize - 8
                height: root.iconSize - 8
                fillMode: Image.PreserveAspectFit
                asynchronous: true
                smooth: true
                cache: true
                visible: status === Image.Ready
                source: root.iconSource
            }

            NebulaIcon {
                anchors.centerIn: parent
                visible: rowIcon.status !== Image.Ready
                name: root.fallbackGlyph
                size: root.glyphSize
                color: item && item.tint ? item.tint : Theme.accent
            }
        }

        Column {
            anchors.verticalCenter: parent.verticalCenter
            width: parent.width - root.iconSize - 10
            spacing: 1

            Text {
                width: parent.width
                text: item ? item.name : ""
                color: Theme.textPrimary
                font.family: Theme.fontFamily
                font.pixelSize: Theme.fontSizeApp
                elide: Text.ElideRight
            }

            Text {
                width: parent.width
                visible: item && item.subtitle ? true : false
                text: item && item.subtitle ? item.subtitle : ""
                color: Theme.textTertiary
                font.family: Theme.fontFamily
                font.pixelSize: Theme.fontSizeSmall
                elide: Text.ElideRight
            }
        }
    }

    MouseArea {
        id: hover
        anchors.fill: parent
        hoverEnabled: true
        cursorShape: Qt.PointingHandCursor
        onClicked: root.selected(item)
    }

    FocusFrame {
        radius: Theme.radiusMedium
    }
}