import QtQuick
import qs.Commons

// A 3x2 grid of keys, drawn rather than glyphed so it scales cleanly and takes
// its colour straight from the caller (and therefore from the active theme).
Item {
  id: root

  property real iconSize: Style.space(14)
  property color color: Color.foreground
  // Lit keys are drawn filled; the rest are outlined. The panel uses this to
  // show the deck's state at a glance without a second icon.
  property int litKeys: 6

  implicitWidth: iconSize
  implicitHeight: iconSize

  readonly property int cols: 3
  readonly property int rows: 2
  readonly property real gap: Math.max(1, iconSize * 0.1)
  readonly property real cell: (iconSize - gap * (cols - 1)) / cols
  readonly property real cellHeight: (iconSize * 0.72 - gap * (rows - 1)) / rows

  Item {
    anchors.centerIn: parent
    width: root.iconSize
    height: root.cellHeight * root.rows + root.gap * (root.rows - 1)

    Repeater {
      model: root.cols * root.rows

      Rectangle {
        required property int index

        readonly property int column: index % root.cols
        readonly property int row: Math.floor(index / root.cols)
        readonly property bool lit: index < root.litKeys

        x: column * (root.cell + root.gap)
        y: row * (root.cellHeight + root.gap)
        width: root.cell
        height: root.cellHeight
        radius: Style.cornerRadius > 0 ? Math.max(1, root.cell * 0.22) : 0

        color: lit ? root.color : "transparent"
        border.width: lit ? 0 : Math.max(1, Math.round(root.iconSize * 0.07))
        border.color: root.color
        opacity: lit ? 1.0 : 0.45
      }
    }
  }
}