import QtQuick
import qs.Commons
import qs.Ui

Item {
  id: root

  property real iconSize: Style.font.icon
  property color color: Color.foreground
  property color badgeColor: Color.urgent
  property bool crossed: false
  property bool warning: false

  width: iconSize
  height: iconSize
  implicitWidth: iconSize
  implicitHeight: iconSize

  // The Offscale mark, replacing the stock 3x3 Tailscale dot grid.
  //
  // offscale-logo.png lives beside this file rather than being referenced from
  // ~/projects, so the plugin stays self-contained and keeps working if that
  // tree moves. It is the source PNG trimmed of its transparent margin, padded
  // back to square so it centres, and scaled 1254 -> 256 (1.1 MB -> 77 KB).
  //
  // sourceSize caps the decode at 256 regardless of how large iconSize gets, so
  // the bar slot never decodes more pixels than it needs; mipmap keeps the
  // downscale to ~27px clean instead of aliased.
  Image {
    id: logo
    anchors.fill: parent
    source: Qt.resolvedUrl("offscale-logo.png")
    sourceSize.width: 256
    sourceSize.height: 256
    fillMode: Image.PreserveAspectFit
    smooth: true
    mipmap: true
    // Dim the mark when Tailscale is down, matching how the stock icon faded
    // its inactive dots.
    opacity: root.crossed ? 0.45 : 1.0
  }

  // Diagonal strike when disconnected.
  Rectangle {
    visible: root.crossed
    anchors.centerIn: parent
    width: parent.width * 1.22
    height: Math.max(2, parent.height * 0.14)
    radius: height / 2
    color: root.color
    rotation: -45
  }

  // "!" badge when a login is needed.
  BorderSurface {
    visible: root.warning
    width: Math.max(7, parent.width * 0.42)
    height: width
    radius: width / 2
    color: root.badgeColor
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    borderSpec: Border.flat(Color.popups.background, 1)

    Text {
      anchors.centerIn: parent
      text: "!"
      color: Color.background
      font.family: Style.font.family
      font.pixelSize: Math.max(6, parent.height * 0.72)
      font.bold: true
    }
  }
}