import QtQuick
import Quickshell
import qs.Common
import qs.Widgets

Rectangle {
    id: bar

    property var panel: null

    readonly property var widgetDefs: (panel && panel.daemon) ? panel.daemon.widgetDefs : []

    width: barRow.width + Theme.spacingL * 2
    height: 56
    radius: height / 2
    color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
    border.color: Theme.outlineMedium
    border.width: Theme.layerOutlineWidth

    SystemClock {
        id: clock

        precision: SystemClock.Minutes
    }

    component BarSeparator: Rectangle {
        anchors.verticalCenter: parent.verticalCenter
        width: 1
        height: 26
        color: Theme.outlineMedium
    }

    Row {
        id: barRow

        anchors.centerIn: parent
        spacing: Theme.spacingM

        Row {
            anchors.verticalCenter: parent.verticalCenter
            spacing: Theme.spacingS

            DankIcon {
                anchors.verticalCenter: parent.verticalCenter
                name: "sports_esports"
                size: Theme.iconSize
                color: Theme.primary
            }

            Column {
                anchors.verticalCenter: parent.verticalCenter
                spacing: 0

                StyledText {
                    text: Qt.formatDateTime(clock.date, "HH:mm")
                    font.pixelSize: Theme.fontSizeLarge
                    font.weight: Font.Medium
                    color: Theme.surfaceText
                }

                StyledText {
                    text: Qt.formatDateTime(clock.date, "ddd d MMM")
                    font.pixelSize: Theme.fontSizeSmall
                    color: Theme.surfaceVariantText
                }
            }
        }

        BarSeparator {}

        Row {
            anchors.verticalCenter: parent.verticalCenter
            spacing: Theme.spacingXS

            Repeater {
                model: bar.widgetDefs

                delegate: Rectangle {
                    id: toggleButton

                    required property var modelData

                    readonly property bool active: bar.panel ? bar.panel.isWidgetVisible(modelData.id) : false

                    width: toggleRow.width + Theme.spacingM * 2
                    height: 38
                    radius: Theme.cornerRadius
                    color: active ? Theme.primarySelected : (toggleArea.containsMouse ? Theme.surfaceHover : "transparent")
                    border.color: active ? Theme.primary : "transparent"
                    border.width: active ? 1 : 0

                    Row {
                        id: toggleRow

                        anchors.centerIn: parent
                        spacing: Theme.spacingXS

                        DankIcon {
                            anchors.verticalCenter: parent.verticalCenter
                            name: toggleButton.modelData.icon
                            size: Theme.iconSize - 6
                            color: toggleButton.active ? Theme.primary : Theme.surfaceText
                        }

                        StyledText {
                            anchors.verticalCenter: parent.verticalCenter
                            text: toggleButton.modelData.title
                            font.pixelSize: Theme.fontSizeSmall
                            font.weight: toggleButton.active ? Font.Medium : Font.Normal
                            color: toggleButton.active ? Theme.primary : Theme.surfaceText
                        }
                    }

                    MouseArea {
                        id: toggleArea

                        anchors.fill: parent
                        hoverEnabled: true
                        cursorShape: Qt.PointingHandCursor
                        onClicked: {
                            if (bar.panel)
                                bar.panel.toggleWidget(toggleButton.modelData.id);
                        }
                    }
                }
            }
        }

        BarSeparator {}

        DankActionButton {
            anchors.verticalCenter: parent.verticalCenter
            iconName: "close"
            buttonSize: 34
            iconSize: 18
            iconColor: Theme.surfaceText
            onClicked: {
                if (bar.panel)
                    bar.panel.requestClose();
            }
        }
    }
}