import QtQuick
import QtQuick.Layouts
import Quickshell.Io

// Mirrors eww settings-menu (revealer + toggle button)
Item {
    id: root
    property string volumeInfo:  ""
    property string networkInfo: ""
    property string themeInfo:   ""

    // exposed so LogoutMenu can close us
    property bool open: false

    implicitHeight: 26
    implicitWidth:  row.implicitWidth

    Row {
        id: row
        spacing: 4
        layoutDirection: Qt.RightToLeft   // toggle btn on the right, menu slides left

        // Toggle button  (eww center-btn)
        Rectangle {
            width: 26; height: 26; radius: 13
            color: root.open ? "#89b4fa" : "#313244"

            Text {
                anchors.centerIn: parent
                text: root.open ? "󰅖" : "󰒓"
                color: root.open ? "#1e1e2e" : "#cdd6f4"
                font.pixelSize: 14
            }

            MouseArea {
                anchors.fill: parent
                onClicked: root.open = !root.open
                cursorShape: Qt.PointingHandCursor
            }
        }

        // Revealed menu (slides in from right)
        Item {
            width:  menuRow.implicitWidth + 8
            height: 26
            clip:   true

            // animate width for slide effect (like :transition slideright)
            Behavior on width { NumberAnimation { duration: 200; easing.type: Easing.InOutQuad } }
            // Collapsed when closed
            states: State {
                name: "hidden"
                when: !root.open
                PropertyChanges { target: menuReveal; width: 0 }
            }

            Item {
                id: menuReveal
                width:  root.open ? menuRow.implicitWidth + 8 : 0
                height: 26
                clip:   true

                Behavior on width { NumberAnimation { duration: 200; easing.type: Easing.InOutQuad } }

                Row {
                    id: menuRow
                    anchors.verticalCenter: parent.verticalCenter
                    spacing: 4
                    x: 4

                    ThemeWidget   { themeInfo:   root.themeInfo }
                    VolumeWidget  { volumeInfo:  root.volumeInfo }
                    NetworkWidget { networkInfo: root.networkInfo }

                    // wdisplays button
                    Rectangle {
                        width: 30; height: 22; radius: 11
                        color: "#313244"
                        Text {
                            anchors.centerIn: parent
                            text: "󰍹"
                            color: "#cdd6f4"
                            font.pixelSize: 13
                        }
                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                root.open = false
                                Qt.createQmlObject(
                                    'import Quickshell.Io; Process { command: ["wdisplays"]; running: true }',
                                    root)
                            }
                            cursorShape: Qt.PointingHandCursor
                        }
                    }
                }
            }
        }
    }
}