import QtQuick 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.5
import org.ukui.menu.core 1.0

MouseArea {
    id: control
    property bool isSelect: false
    hoverEnabled: true
    states: State {
        when: control.activeFocus
        PropertyChanges {
            target: controlBase
            alpha: 0.55
        }
    }
    StyleBackground {
        id: controlBase
        anchors.fill: parent
        radius: 4
        useStyleTransparent: false
        alpha: isSelect ? 1.00 : control.containsPress ? 0.82 : control.containsMouse ? 0.55 : 0.00
        ToolTip.visible: content.textTruncated && control.containsMouse
        ToolTip.text: name

        RowLayout {
            anchors.fill: parent
            spacing: 2

            IconLabel {
                id: content
                Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
                Layout.fillWidth: true
                Layout.fillHeight: true

                iconHeight: 32; iconWidth: iconHeight
                appName: name; appIcon: icon
                display: Display.TextBesideIcon
                spacing: 12
            }

            Loader {
                id: tag
                property bool recentInsatlled: (recentInstall === undefined) ? false : recentInstall
                property bool fixToTop: (toTop !== undefined) && (toTop !== 0)
                visible: fixToTop || recentInsatlled
                Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.maximumWidth: visible ? 16 : 0
                Layout.maximumHeight: width
                Layout.rightMargin: visible ? 25 : 0

                Component {
                    id: tagImage
                    Image {
                        source: "image://appicon/ukui-fixed-symbolic"
                    }
                }

                Component {
                    id: tagPoint
                    Item {
                        Rectangle {
                            anchors.centerIn: parent
                            width: 8; height: width
                            radius: width / 2
                            color: themePalette.paletteColor(Palette.Highlight)
                        }
                    }
                }
                sourceComponent: tag.fixToTop ? tagImage : tag.recentInsatlled ? tagPoint : null
            }
        }
    }
}