pragma ComponentBehavior: Bound

import qs.modules.bar.popouts as BarPopouts
import qs.config
import qs.custom
import Quickshell
import Quickshell.Widgets
import QtQuick
import QtQuick.Layouts

Item {
    id: root

    required property PersistentProperties uiState
    required property BarPopouts.Wrapper popouts

    readonly property color color: tabs.color
    readonly property real nonAnimHeight: view.implicitHeight + viewWrapper.anchors.margins * 2
    implicitWidth: tabs.implicitWidth + tabs.anchors.leftMargin + view.implicitWidth + viewWrapper.anchors.margins * 2
    implicitHeight: nonAnimHeight

    Tabs {
        id: tabs

        anchors.left: parent.left
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.leftMargin: 10
        anchors.margins: 15
        nonAnimHeight: root.nonAnimHeight - anchors.margins * 2
        uiState: root.uiState
    }

    CustomClippingRect {
        id: viewWrapper

        anchors.left: tabs.right
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.margins: 15

        radius: 17
        color: "transparent"

        Item {
            id: view

            readonly property int currentIndex: root.uiState.dashboardTab
            readonly property Item currentItem: column.children[currentIndex]

            anchors.fill: parent

            implicitWidth: currentItem.implicitWidth
            implicitHeight: currentItem.implicitHeight

            ColumnLayout {
                id: column

                y: -view.currentItem.y
                spacing: 8

                Pane {
                    sourceComponent: Dash {
                        uiState: root.uiState
                    }
                }

                Pane {
                    sourceComponent: Mixer {
                        uiState: root.uiState
                        index: 1
                    }
                }

                Pane {
                    sourceComponent: Media {
                        uiState: root.uiState
                    }
                }

                Pane {
                    source: "Performance.qml"
                }

                Pane {
                    sourceComponent: Workspaces {
                        uiState: root.uiState
                        popouts: root.popouts
                    }
                }

                Behavior on y {
                    Anim {}
                }
            }
        }
    }

    Behavior on implicitWidth {
        Anim {
            duration: Config.anim.durations.large
            easing.bezierCurve: Config.anim.curves.emphasized
        }
    }

    Behavior on implicitHeight {
        Anim {
            duration: Config.anim.durations.large
            easing.bezierCurve: Config.anim.curves.emphasized
        }
    }

    component Pane: Loader {
        Layout.alignment: Qt.AlignLeft

        property real bufferY: 5
        Component.onCompleted: active = Qt.binding(() => {
            const vy = Math.floor(-column.y);
            const vey = Math.floor(vy + view.height);
            return (vy >= y - bufferY && vy <= y + implicitHeight) || (vey >= y + bufferY && vey <= y + implicitHeight);
        })
    }
}