import QtQuick 2.0

Item {
    id: root
    height: parent.height
    property alias text: id_text.text
    property int sortState: 0
    signal clicked
    onSortStateChanged: {
        if (sortState === 0) {
            id_text.color = "#848984"
            id_text.font.bold = false
        } else {
            id_text.color = "#0091ff"
            id_text.font.bold = true
        }
    }

    Rectangle {
        id: idRectangle
        radius: 100
        opacity: 0
        color: "black"
        anchors.fill: parent

        Behavior on opacity {
            NumberAnimation {
                duration: 100
            }
        }

        MouseArea {
            anchors.fill: parent
            hoverEnabled: true
            onHoveredChanged: {
                if (containsMouse) {
                    idRectangle.opacity = 0.05
                } else {
                    idRectangle.opacity = 0
                }
            }
        }
    }

    Text {
        id: id_text
        anchors.fill: parent
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        color: "#848984"
    }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            if (sortState === 0)
                sortState = 1
            else if (sortState === 1)
                sortState = -1
            else if (sortState === -1)
                sortState = 0

            root.clicked()
        }
    }
}