PatternBank.tish

// Pattern launcher — the live surface beside the sequencer. Patterns ARE scenes (one concept).
// Each pattern card stacks three actions:
//   LOAD   → pull the pattern into the rack so you can edit it (Play Sequence monitors the rack)
//   SAVE   → copy the current rack back into the pattern (edit-only, never plays)
//   LAUNCH → make the pattern the LIVE output (P0); queues to the next bar while a song plays
// P0 is the LIVE card: read-only, it just reflects whichever pattern is currently armed.
// The deck mixer is separate equipment — it is live-only and unrelated to LOAD/SAVE/LAUNCH.

import { h, Fragment } from '@tishlang/lattish'
import { LucideIcon } from './InstrumentKit.tish'

export fn PatternBank(bank) {
  let count = Math.floor(Number(bank.count))
  if (count < 1 || count !== count) {
    count = 4
  }
  let editing = bank.editingScene
  let live = bank.liveScene
  let queued = bank.queuedScene
  let queuePending = bank.queuePending === true

  let cards = []

  // P0 — the LIVE output. Not editable; mirrors the currently armed pattern.
  let liveLabel = "idle"
  if (live !== null) {
    liveLabel = "P" + String(Math.floor(Number(live)) + 1)
  }
  let liveCls = "pb-card pb-card-p0"
  if (live !== null) {
    liveCls = liveCls + " pb-card-live-on"
  }
  cards.push(
    <div class={liveCls} key="pb-p0" title={"P0 is the live output — launch a pattern to send it here"}>
      <span class="pb-card-n">{"P0"}</span>
      <span class="pb-live-badge">{"LIVE"}</span>
      <span class="pb-live-src">{liveLabel}</span>
    </div>
  )

  let i = 0
  while (i < count) {
    let sidx = i
    let isEditing = editing !== null && Math.floor(Number(editing)) === sidx
    let isLive = live !== null && Math.floor(Number(live)) === sidx
    let isQueued = queuePending && queued !== null && Math.floor(Number(queued)) === sidx

    let cardCls = "pb-card"
    if (isEditing) {
      cardCls = cardCls + " pb-card-editing"
    }
    if (isLive) {
      cardCls = cardCls + " pb-card-live"
    }
    if (isQueued) {
      cardCls = cardCls + " pb-card-queued"
    }

    let loadOn = isEditing ? " pb-btn-on" : ""
    let launchCls = "pb-btn pb-btn-launch pb-btn-grow"
    if (isLive) {
      launchCls = launchCls + " pb-btn-on"
    }
    let launchLabel = "LAUNCH"
    if (isQueued) {
      if (bank.dropSteps !== null) {
        launchLabel = bank.dropSteps === 0 ? "● NOW" : "◷ " + String(bank.dropSteps)
      } else {
        launchLabel = "◷ QUEUED"
      }
    }
    let barN = bank.viewBar !== null ? Math.floor(Number(bank.viewBar)) + 1 : 1
    let one = String(i + 1)

    cards.push(
      <div class={cardCls} key={"pb-" + String(i)}>
        <div class="pb-card-top">
          <span class="pb-card-n">{"P" + one}</span>
          <button
            type="button"
            class={launchCls}
            title={"Launch pattern " + one + " live (queues to the next bar while a song plays)"}
            onclick={() => bank.onLaunch(sidx)}
          >
            {launchLabel}
          </button>
        </div>
        <div class="pb-split-row">
          <span class="pb-split-label" title="LOAD">{LucideIcon("download")}</span>
          <button
            type="button"
            class={"pb-btn pb-btn-load" + loadOn}
            title={"Load only bar " + String(barN) + " (the bar you're viewing) of pattern " + one + " — other bars untouched"}
            onclick={() => bank.onLoadBar(sidx)}
            style={{ display: "flex", alignItems: "center", justifyContent: "center" }}
          >
            {LucideIcon("square")}
          </button>
          <button
            type="button"
            class={"pb-btn pb-btn-load" + loadOn}
            title={"Load all bars of pattern " + one + " into the rack"}
            onclick={() => bank.onLoad(sidx)}
            style={{ display: "flex", alignItems: "center", justifyContent: "center" }}
          >
            {LucideIcon("layout-grid")}
          </button>
        </div>
        <div class="pb-split-row">
          <span class="pb-split-label" title="SAVE">{LucideIcon("save")}</span>
          <button
            type="button"
            class="pb-btn pb-btn-save"
            title={"Save only bar " + String(barN) + " (the bar you're viewing) into pattern " + one + " — its other bars untouched"}
            onclick={() => bank.onSaveBar(sidx)}
            style={{ display: "flex", alignItems: "center", justifyContent: "center" }}
          >
            {LucideIcon("square")}
          </button>
          <button
            type="button"
            class="pb-btn pb-btn-save"
            title={"Save the whole rack (all bars) into pattern " + one}
            onclick={() => bank.onSave(sidx)}
            style={{ display: "flex", alignItems: "center", justifyContent: "center" }}
          >
            {LucideIcon("layout-grid")}
          </button>
        </div>
      </div>
    )
    i = i + 1
  }

  return (
    <div class="panel pb-panel pb-panel-col">
      <span class="pb-rev" style={{ display: "none" }}>{String(bank.rev)}</span>
      <div class="pb-head">
        <span class="pb-label">{"PATTERNS"}</span>
        <span class="pb-sub" style={{ display: "flex", alignItems: "center", gap: "4px" }}>{LucideIcon("square")} {"·"} {LucideIcon("layout-grid")}</span>
      </div>
      <div class="pb-cards">{cards}</div>
      <span class="pb-hint" style={{ display: "flex", alignItems: "center", gap: "4px", flexWrap: "wrap", justifyContent: "center" }}>
        {LucideIcon("square")} {" = just the bar you're viewing · "} {LucideIcon("layout-grid")} {" = the whole pattern. LAUNCH sends it live."}
      </span>
    </div>
  )
}