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

PanelWindow {
    id: bar

    anchors {
        top: true
        left: true
        right: true
    }

    implicitHeight: Config.barHeight
    color: "transparent"

    Rectangle {
        id: content

        anchors.fill: parent
        color: Config.barBackground
        opacity: 0
        y: -Config.barHeight

        RowLayout {
            anchors {
                left: parent.left
                leftMargin: Config.barMargin
                verticalCenter: parent.verticalCenter
            }

            spacing: Config.workspaceSpacing

            Loader {
                active: true
                sourceComponent: Workspaces {}
            }
        }

        Rectangle {
            anchors {
                horizontalCenter: parent.horizontalCenter
                verticalCenter: parent.verticalCenter
            }

            height: Config.blockHeight
            width: windowTitle.contentWidth + Config.blockPadding
            radius: Config.blockRadius
            color: "transparent"

            Text {
                id: windowTitle

                anchors.centerIn: parent

                text: niri.focusedWindow?.title ?? ""

                color: Config.textWindow

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

                elide: Text.ElideRight
            }
        }

        RowLayout {
            id: rightLayout

            anchors {
                right: parent.right
                rightMargin: Config.barMargin
                verticalCenter: parent.verticalCenter
            }

            spacing: Config.workspaceSpacing

            Loader {
                active: true
                sourceComponent: Music {}
            }

            Loader {
                active: true
                sourceComponent: Time {}
            }

            Loader {
                active: true
                sourceComponent: QuickControl {}
            }
        }
    }

    ParallelAnimation {
        id: showAnimation

        NumberAnimation {
            target: content
            property: "y"
            from: -Config.barHeight
            to: 0
            duration: Config.barAnimationDuration
            easing.type: Easing.OutCubic
        }

        NumberAnimation {
            target: content
            property: "opacity"
            from: 0
            to: 1
            duration: Config.barAnimationDuration
            easing.type: Easing.OutCubic
        }
    }

    ParallelAnimation {
        id: hideAnimation

        NumberAnimation {
            target: content
            property: "y"
            from: 0
            to: -Config.barHeight
            duration: Config.barAnimationDuration
            easing.type: Easing.InCubic
        }

        NumberAnimation {
            target: content
            property: "opacity"
            from: 1
            to: 0
            duration: Config.barAnimationDuration
            easing.type: Easing.InCubic
        }

        onFinished: {
            showAnimation.start()
        }
    }

    Component.onCompleted: {
        showAnimation.start()
    }

    function restart() {
        showAnimation.stop()
        hideAnimation.stop()
        hideAnimation.start()
    }
}