import QtQuick
import QtQuick.Layouts
import Quickshell
import Quickshell.Services.SystemTray
import "../../config.js" as Config

Rectangle {
    id: root

    property bool expanded: false

    implicitWidth: expanded
        ? layout.implicitWidth + 24
        : dotsContainer.implicitWidth + 24

    implicitHeight: Config.blockHeight

    radius: Config.blockRadius

    gradient: Gradient {
        GradientStop {
            id: stop1
            position: 0.0
            color: Config.accentGreen
        }

        GradientStop {
            id: stop2
            position: 0.33
            color: Config.accentYellow
        }

        GradientStop {
            id: stop3
            position: 0.66
            color: Config.accentOrange
        }

        GradientStop {
            id: stop4
            position: 1.0
            color: Config.accentRed
        }
    }

    Behavior on implicitWidth {
        NumberAnimation {
            duration: 250
            easing.type: Easing.OutCubic
        }
    }

    RowLayout {
        id: layout

        anchors {
            right: parent.right
            verticalCenter: parent.verticalCenter
            rightMargin: 12
        }

        spacing: 8

        Repeater {
            model: SystemTray.items

            delegate: Item {
                id: trayItem

                required property var modelData

                implicitWidth: 18
                implicitHeight: 18

                Layout.preferredWidth: 18
                Layout.preferredHeight: 18

                opacity: root.expanded ? 1 : 0

                Behavior on opacity {
                    NumberAnimation {
                        duration: 200
                        easing.type: Easing.OutCubic
                    }
                }

                visible: opacity > 0

                QsMenuAnchor {
                    id: menuAnchor

                    anchor.item: trayItem
                    menu: modelData.menu
                }

                Image {
                    anchors.fill: parent

                    source: modelData.icon
                    sourceSize.width: 18
                    sourceSize.height: 18
                    fillMode: Image.PreserveAspectFit
                }

                MouseArea {
                    anchors.fill: parent

                    enabled: root.expanded

                    acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton

                    cursorShape: Qt.PointingHandCursor

                    onClicked: function(mouse) {
                        if (mouse.button === Qt.RightButton) {
                            if (modelData.hasMenu)
                                menuAnchor.open()
                            return
                        }

                        if (mouse.button === Qt.MiddleButton) {
                            modelData.secondaryActivate()
                            return
                        }

                        if (modelData.onlyMenu && modelData.hasMenu)
                            menuAnchor.open()
                        else
                            modelData.activate()
                    }
                }
            }
        }

        Item {
            id: dotsContainer

            implicitWidth: 24
            implicitHeight: Config.blockHeight

            Layout.preferredWidth: 24
            Layout.preferredHeight: Config.blockHeight
            Layout.alignment: Qt.AlignVCenter

            Text {
                id: dots

                anchors.centerIn: parent

                text: "•••"

                color: Config.textDark

                font.family: Config.fontFamily
                font.pixelSize: Config.fontSize
                font.bold: true

                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter

                MouseArea {
                    anchors.fill: parent

                    cursorShape: Qt.PointingHandCursor

                    onClicked: {
                        root.expanded = !root.expanded
                    }
                }
            }
        }
    }

    SequentialAnimation {
        running: true
        loops: Animation.Infinite

        ParallelAnimation {
            ColorAnimation {
                target: stop1
                property: "color"
                from: Config.accentGreen
                to: Config.accentRed
                duration: Config.gradientAnimationDuration
            }

            ColorAnimation {
                target: stop2
                property: "color"
                from: Config.accentYellow
                to: Config.accentGreen
                duration: Config.gradientAnimationDuration
            }

            ColorAnimation {
                target: stop3
                property: "color"
                from: Config.accentOrange
                to: Config.accentYellow
                duration: Config.gradientAnimationDuration
            }

            ColorAnimation {
                target: stop4
                property: "color"
                from: Config.accentRed
                to: Config.accentOrange
                duration: Config.gradientAnimationDuration
            }
        }

        ParallelAnimation {
            ColorAnimation {
                target: stop1
                property: "color"
                from: Config.accentRed
                to: Config.accentGreen
                duration: Config.gradientAnimationDuration
            }

            ColorAnimation {
                target: stop2
                property: "color"
                from: Config.accentGreen
                to: Config.accentYellow
                duration: Config.gradientAnimationDuration
            }

            ColorAnimation {
                target: stop3
                property: "color"
                from: Config.accentYellow
                to: Config.accentOrange
                duration: Config.gradientAnimationDuration
            }

            ColorAnimation {
                target: stop4
                property: "color"
                from: Config.accentOrange
                to: Config.accentRed
                duration: Config.gradientAnimationDuration
            }
        }
    }
}