import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import Quickshell
import Quickshell.Widgets
import Quickshell.Services.Notifications
import qs.common
import qs.common.widgets

Item {
  id: root
  required property Notification notif
  required property real textWidth
  required property real notificationRounding
  property real spacing: 8

  Layout.fillWidth: true
  
  implicitHeight: content.implicitHeight


  ColumnLayout {
    id: content
    Layout.fillWidth: true
    spacing: 0
    Rectangle {
      implicitHeight: appTitle.implicitHeight
      implicitWidth: root.width
      anchors.margins: Config.options.bar.cornerStyle === 1 ? (Appearance.sizes.hyprlandGapsOut) : 0
      color: Appearance.m3colors.m3primaryContainer
      topLeftRadius: root.notificationRounding
      topRightRadius: root.notificationRounding
      RowLayout {
        spacing: 0 // For some reason, adding a spacing of just the value will not work properly
        IconImage {
          visible: root.notif.appIcon.length > 0
          id: appIcon
          source: Quickshell.iconPath(root.notif.appIcon)
          width: appTitle.height - root.spacing
          height: appTitle.height - root.spacing
          Layout.leftMargin: root.spacing / 2
        }
        Text {
          // app title
          id: appTitle
          text: root.notif.appName
          color: Appearance.m3colors.m3onPrimaryContainer
          Layout.leftMargin: root.spacing / 2
        }
      }
    }
    Rectangle {
      visible: notifSummary.visible || notifBody.visible
      implicitHeight: body.implicitHeight
      implicitWidth: root.width
      anchors.margins: Config.options.bar.cornerStyle === 1 ? (Appearance.sizes.hyprlandGapsOut) : 0
      color: Appearance.colors.colLayer2
      bottomLeftRadius: root.notificationRounding
      bottomRightRadius: root.notificationRounding
      ColumnLayout {
        id: body
        spacing: root.spacing
        Text {
          visible: root.notif.summary.length > 0
          Layout.leftMargin: root.spacing
          Layout.rightMargin: root.spacing
          id: notifSummary
          text: root.notif.summary
          color: Appearance.colors.colOnLayer2
          wrapMode: Text.WordWrap
        }
        Text {
          visible: root.notif.body.length > 0
          Layout.leftMargin: root.spacing
          Layout.rightMargin: root.spacing
          Layout.preferredWidth: textWidth
          id: notifBody
          text: root.notif.body
          color: Appearance.colors.colOnLayer2
          wrapMode: Text.WordWrap
          maximumLineCount: 4
        }
        RowLayout {
          id: actionLayer
          Layout.fillWidth: true
          Layout.leftMargin: root.spacing
          Layout.rightMargin: root.spacing
          Layout.bottomMargin: root.spacing
          spacing: root.spacing
          RippleButton {
            buttonText: "Dismiss"
            colBackground: Appearance.m3colors.m3primaryContainer
            releaseAction: root.notif.dismiss
            buttonRadius: root.notificationRounding
          }

          Repeater {
            model: root.notif.actions
            RippleButton {
              buttonText: modelData.text
              buttonTextColor: Appearance.m3colors.m3onTertiaryContainer
              colBackground: Appearance.m3colors.m3tertiaryContainer
              releaseAction: modelData.invoke
              buttonRadius: root.notificationRounding
            }
          }
        }
      }
    }
  }
}