import QtQuick 2.13
import QtQml 2.13
import QtQuick.Layouts 1.13
import QtGraphicalEffects 1.13
import "../"
import "../aCommon"

Item {
    id: root
    property bool isSelected: false
    property var stateOfComponent: Setting.Enable
    property var indexManager
    property var myIndex
    property var currentIndex: indexManager.currentIndex

    property bool rightHasRadius: false
    property bool leftHasRadius: false

    property int radius: 0

    onCurrentIndexChanged: {
        if (currentIndex === myIndex) {
            isSelected = true
        } else
            isSelected = false
    }

    onIsSelectedChanged: buildComponent()
    property alias text: idText.text
    Layout.fillHeight: true
    Layout.fillWidth: true

    RectangleWithRadius {
        id: idBackGround
        anchors.fill: parent
        topLeftRadiusEnable: leftHasRadius
        buttonLeftRadiusEnable: leftHasRadius

        topRightRadiusEnable: rightHasRadius
        buttonRighttRadiusEnable: rightHasRadius

        radius: root.radius
        Behavior on color {
            ColorAnimation {
                duration: Setting.animationDuration
            }
        }
    }

    Text {
        id: idText
        anchors.fill: parent
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        font: Fonts.h5
        color: Colors.tertiaryEnable
        Behavior on color {
            ColorAnimation {
                duration: Setting.animationDuration
            }
        }
    }
    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onHoveredChanged: {
            if (containsMouse) {
                stateOfComponent = Setting.Hoverd
            } else {
                stateOfComponent = Setting.Enable
            }
        }
        onPressed: {
            stateOfComponent = Setting.Pressed
            indexManager.clicked(myIndex)
        }
        onReleased: {
            stateOfComponent = Setting.Enable
        }
    }

    function buildComponent() {
        if (isSelected) {
            idBackGround.color = Colors.primaryEnable
            idText.color = Colors.black
        } else {
            idBackGround.color = "transparent"
            idText.color = Colors.tertiaryEnable
        }
    }

    Component.onCompleted: {
        buildComponent()
    }
}