// The "you are being recorded" pill.
//
// GNOME puts a red dot and a timer in the top bar while a screencast runs and
// clicking it stops the recording. The bar is another module's window, so this
// is its own tiny layer surface parked just below it.

import Quickshell
import Quickshell.Wayland
import QtQuick
import qs.config
import qs.services

PanelWindow {
    id: win

    visible: Capture.recording
    color: "transparent"

    // Top only: with neither left nor right anchored, layer-shell centres the
    // surface horizontally.
    anchors.top: true
    margins.top: Theme.barGap * 2 + Theme.barHeight + Theme.barGap

    implicitWidth: pill.implicitWidth
    implicitHeight: pill.implicitHeight
    exclusiveZone: 0

    WlrLayershell.namespace: "qs-popover-recording"
    WlrLayershell.layer: WlrLayer.Overlay
    WlrLayershell.keyboardFocus: WlrKeyboardFocus.None

    function elapsed(): string {
        const t = Capture.recordingSeconds;
        const s = ("0" + (t % 60)).slice(-2);
        const m = Math.floor(t / 60) % 60;
        const h = Math.floor(t / 3600);
        return h > 0 ? h + ":" + ("0" + m).slice(-2) + ":" + s : m + ":" + s;
    }

    Rectangle {
        id: pill
        implicitWidth: row.implicitWidth + 12
        implicitHeight: 34
        radius: Theme.pillRadius
        border.width: 0
        color: Theme.redDeep

        Row {
            id: row
            anchors.centerIn: parent
            spacing: 8

            // Static dot, not a blinking one: nothing in this shell repaints
            // while idle.
            Rectangle {
                anchors.verticalCenter: parent.verticalCenter
                width: 10
                height: 10
                radius: 5
                border.width: 0
                color: Theme.fg
            }

            Text {
                anchors.verticalCenter: parent.verticalCenter
                text: win.elapsed()
                color: Theme.fg
                // Tabular figures: the timer must not shuffle as it counts.
                font.family: Theme.fontFamily
                font.features: Theme.tabularFigures
                font.pixelSize: Theme.fontSize
                font.weight: Font.Medium
            }

            Rectangle {
                id: stop
                anchors.verticalCenter: parent.verticalCenter
                width: 26
                height: 26
                radius: width / 2
                border.width: 0
                color: stopMouse.containsMouse ? Theme.alpha(Theme.fg, 0.28) : Theme.alpha(Theme.fg, 0.14)

                Behavior on color {
                    ColorAnimation {
                        duration: Theme.durFast
                    }
                }

                Text {
                    anchors.centerIn: parent
                    text: "󰓛"
                    color: Theme.fg
                    font.family: Theme.fontMono
                    font.pixelSize: Theme.fontSize
                }

                MouseArea {
                    id: stopMouse
                    anchors.fill: parent
                    hoverEnabled: true
                    cursorShape: Qt.PointingHandCursor
                    // SIGINT, so wf-recorder finalises the container.
                    onClicked: Capture.stopRecording()
                }
            }
        }
    }
}
