import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Item {
    id: root

    property var theme
    property int currentIndex: 0
    signal selected(int index)

    readonly property var names: ["Quick", "Bar", "Panel", "Notifications", "Status"]
    implicitWidth: 78

    Rectangle {
        anchors.fill: parent
        radius: root.theme ? root.theme.cardRadius : 14
        color: root.theme ? root.theme.surface : "#181825"
        border.color: root.theme ? root.theme.border : "#313244"
        border.width: 1
    }

    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 7
        spacing: 5

        Label {
            text: "iN"
            color: root.theme ? root.theme.primary : "#89b4fa"
            font.pixelSize: 17
            font.bold: true
            horizontalAlignment: Text.AlignHCenter
            Layout.fillWidth: true
            Layout.bottomMargin: 5
        }

        Repeater {
            model: root.names
            delegate: Rectangle {
                required property int index
                required property string modelData
                Layout.fillWidth: true
                Layout.preferredHeight: 48
                radius: 11
                color: index === root.currentIndex
                       ? (root.theme ? root.theme.primary : "#89b4fa")
                       : (navMouse.containsMouse ? (root.theme ? root.theme.surfaceRaised : "#24243a") : "transparent")

                Column {
                    anchors.centerIn: parent
                    spacing: 2
                    Label {
                        text: ["⌂", "≡", "▣", "●", "⌁"][index]
                        color: index === root.currentIndex ? (root.theme ? root.theme.background : "#11111b") : (root.theme ? root.theme.mutedText : "#9399b2")
                        font.pixelSize: 17
                        horizontalAlignment: Text.AlignHCenter
                        width: 58
                    }
                    Label {
                        text: modelData
                        color: index === root.currentIndex ? (root.theme ? root.theme.background : "#11111b") : (root.theme ? root.theme.mutedText : "#9399b2")
                        font.pixelSize: 9
                        horizontalAlignment: Text.AlignHCenter
                        width: 58
                    }
                }

                MouseArea {
                    id: navMouse
                    anchors.fill: parent
                    hoverEnabled: true
                    onClicked: root.selected(index)
                }
            }
        }

        Item { Layout.fillHeight: true }

        Label {
            text: "Niri"
            color: root.theme ? root.theme.dimText : "#6c7086"
            font.pixelSize: 9
            horizontalAlignment: Text.AlignHCenter
            Layout.fillWidth: true
        }
    }
}