import QtQuick 2.15
import Qt5Compat.GraphicalEffects

Rectangle{
    id: control

    property var p_width: 25
    property var p_height: 25
    property var p_img: "nav_car.png"
    property var p_checked: false

    signal clickItem(var type);

    onP_checkedChanged: function(nv) {
        if (control.p_checked) {
            control.gradient.stops[0].color = "#77ED8B"
            control.gradient.stops[1].color = "#22C55E"
            img_nav.visible = true
        } else {
            control.gradient.stops[0].color = Qt.rgba(255/255,255/255,255/255, 0.05)
            control.gradient.stops[1].color = Qt.rgba(255/255,255/255,255/255, 0.05)
            img_nav.visible = false
        }
    }

    width: p_width
    height: p_height
    radius: 5
    gradient: Gradient {
        orientation: Gradient.Horizontal
        GradientStop { position: 0.0; color: control.p_checked ? "#77ED8B" : Qt.rgba(255/255,255/255,255/255, 0.05) }
        GradientStop { position: 1.0; color: control.p_checked ? "#22C55E" : Qt.rgba(255/255,255/255,255/255, 0.05) }
    }
    Image{
        source: "qrc:/qt/qml/Gallery/res/image/components/map/" + p_img
        anchors.centerIn: parent
        ColorOverlay{
            id: img_nav
            anchors.fill: parent
            color: "#2a2a2a"
            source: parent
            visible: control.p_checked
        }
    }

    MouseArea{
        anchors.fill: parent
        hoverEnabled: true
        onEntered: {
            if (!control.p_checked) {
                parent.gradient.stops[0].color = "#77ED8B"
                parent.gradient.stops[1].color = "#22C55E"
                img_nav.visible = true
            }
        }
        onExited: {
            if (!control.p_checked) {
                parent.gradient.stops[0].color = Qt.rgba(255/255,255/255,255/255, 0.05)
                parent.gradient.stops[1].color = Qt.rgba(255/255,255/255,255/255, 0.05)
                img_nav.visible = false
            }
        }
        onClicked: {
            control.clickItem("")
        }
    }
}