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

Rectangle {
    id: workspaceBlock

    implicitWidth: workspaceRow.width + 16
    implicitHeight: Config.blockHeight

    color: "transparent"

    RowLayout {
        id: workspaceRow

        anchors.verticalCenter: parent.verticalCenter
        spacing: Config.workspaceSpacing

        Repeater {
            model: niri.workspaces

            delegate: Rectangle {
                id: workspace

                visible: model.output === Config.barOutput && index < 11

                implicitWidth: Config.workspaceWidth
                implicitHeight: Config.blockHeight

                radius: Config.blockRadius

                color: model.isActive
                    ? "transparent"
                    : Config.workspaceBackground

                layer.enabled: true

                Rectangle {
                    anchors.fill: parent
                    radius: parent.radius
                    visible: model.isActive

                    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
                        }
                    }

                    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
                            }
                        }
                    }
                }

                Item {
                    anchors.fill: parent

                    Text {
                        anchors.fill: parent

                        text: index

                        color: model.isActive
                            ? Config.textDark
                            : Config.textInactive

                        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: {
                        niri.focusWorkspaceById(model.id)
                    }
                }
            }
        }
    }
}