import QtQuick 2.15
import QtQuick.Layouts
import QtQuick.Controls
import FluentUI.Controls
import FluentUI.impl
import Qt5Compat.GraphicalEffects

MenuItem{
    id: mt

    property var m_icon;
    property var m_text;
    property var m_key;
    property var show_key: true
    property var show_img: true
    property var m_width: 14
    property var m_height: 14
    property var m_hover: true
    signal clickItem(var type)

    contentItem: Rectangle {
        anchors.fill: parent
        color: 'transparent'
        Image{
            anchors{
                left: parent.left
                leftMargin: 10
            }
            anchors.verticalCenter: parent.verticalCenter
            width: mt.m_width
            height: mt.m_height
            source: mt.m_icon
            visible: mt.show_img
            ColorOverlay{
                anchors.fill: parent
                color: "#2a2a2a"
                source: parent
                visible: mt.m_hover && mt.highlighted
            }
        }
        Label{
            text: mt.m_text
            color: mt.highlighted ? "#2a2a2a" : "#cccccc"
            anchors{
                left: parent.left
                leftMargin: 30 + (mt.m_width - 14)
            }
            anchors.verticalCenter: parent.verticalCenter
        }
        Rectangle{
            anchors{
                right: parent.right
                top: parent.top
                rightMargin: 10
                topMargin: 9
            }
            width: 16
            height: 16
            color: show_key ? mt.highlighted ? Qt.rgba(0/255,0/255,0/255, 0.2) : Qt.rgba(255/255,255/255,255/255, 0.2): "transparent"
            radius: 3
            Label{
                anchors.right: parent.right
                anchors.rightMargin: 5
                text: mt.m_key
                color: mt.highlighted ? "#2a2a2a" : "#888"
                font.pointSize: 9
                anchors.centerIn: parent
            }
        }
    }
    background: Rectangle {
        anchors.fill: parent
        anchors.leftMargin: 5
        anchors.rightMargin: 5
        anchors.bottomMargin: 4
        anchors.topMargin: 4
        radius: 5
        color: mt.down ? "#77ED8B" : mt.highlighted ? "#77ED8B" : "transparent"
        gradient: Gradient {
            orientation: Gradient.Horizontal
            GradientStop { position: 0.0; color: mt.highlighted ? "#77ED8B" : "transparent" }
            GradientStop { position: 1.0; color: mt.highlighted ? "#22C55E" : "transparent" }
        }
    }
    onClicked: {
        mt.clickItem("")
    }
}