import QtQuick
import Quickshell
import Quickshell.Wayland
import "." as M

PanelWindow {
    id: root

    required property var screen

    visible: _winVisible
    color: "transparent"

    property bool _winVisible: false
    property bool _shown: M.FlyoutState.visible && M.FlyoutState.screen === root.screen

    on_ShownChanged: {
        if (_shown) {
            _winVisible = true;
            hideAnim.stop();
            showAnim.start();
        } else {
            showAnim.stop();
            hideAnim.start();
        }
    }

    WlrLayershell.layer: WlrLayer.Overlay
    WlrLayershell.exclusiveZone: 0
    WlrLayershell.namespace: "nova-flyout"

    anchors.top: true
    anchors.left: true

    margins.top: 0
    margins.left: Math.max(0, Math.min(Math.round(M.FlyoutState.itemX - implicitWidth / 2), screen.width - implicitWidth))

    implicitWidth: label.implicitWidth + M.Theme.barPadding * 2
    implicitHeight: label.implicitHeight + M.Theme.barPadding * 2

    ParallelAnimation {
        id: showAnim
        NumberAnimation {
            target: content
            property: "opacity"
            to: 1
            duration: 120
            easing.type: Easing.OutCubic
        }
        NumberAnimation {
            target: content
            property: "y"
            to: 0
            duration: 150
            easing.type: Easing.OutCubic
        }
    }

    ParallelAnimation {
        id: hideAnim
        NumberAnimation {
            target: content
            property: "opacity"
            to: 0
            duration: 150
            easing.type: Easing.InCubic
        }
        NumberAnimation {
            target: content
            property: "y"
            to: -content.height
            duration: 150
            easing.type: Easing.InCubic
        }
        onFinished: root._winVisible = false
    }

    Item {
        id: content
        anchors.left: parent.left
        anchors.right: parent.right
        height: root.implicitHeight
        opacity: 0
        y: -height

        Rectangle {
            anchors.fill: parent
            color: M.Theme.base00
            opacity: Math.max(M.Theme.barOpacity, 0.85)
            topLeftRadius: 0
            topRightRadius: 0
            bottomLeftRadius: M.Theme.radius
            bottomRightRadius: M.Theme.radius
        }

        Text {
            id: label
            anchors.centerIn: parent
            text: M.FlyoutState.text.replace(/\n/g, "<br>")
            textFormat: Text.RichText
            color: M.Theme.base05
            font.pixelSize: M.Theme.fontSize
            font.family: M.Theme.fontFamily
        }
    }
}