CodeDebugView.tish

import {
  tplDocumentToHighlightHtml
} from './SongEditorHighlight.tish'
import { useState, h, Fragment } from '@tishlang/lattish'
import { emitProject } from '../deckfile/Emit.tish'
import { applyTplSource } from '../deckfile/Apply.tish'

fn flushTplSongEditorFromProject(project, setTplText, rt) {
  let p = project
  if (!p && rt) {
    p = rt.project
  }
  let em = emitProject(p)
  setTplText(em)
  setTimeout(() => {
    let p2 = project
    if (!p2 && rt) {
      p2 = rt.project
    }
    let e2 = emitProject(p2)
    if (rt && rt.setSongText) {
      rt.setSongText(e2)
    }
    setTplText(e2)
  }, 0)
}

export fn CodeDebugView(project, setProject, tplText, setTplText, rt, dock) {
  let [tplErr, setTplErr] = useState("")
  let docked = dock === true
  let taRows = 22
  if (docked) {
    taRows = 12
  }

  if (rt) {
    rt.tplSongEditorEcho = tplText
    rt.streamAppendLine = (line) => {
      let cur = ""
      if (rt.getSongText) {
        cur = rt.getSongText()
      } else {
        if (rt.tplTextarea) {
          cur = rt.tplTextarea.value
        }
      }
      if (cur === null) {
        cur = ""
      }
      if (cur.length > 0 && !cur.endsWith("\n")) {
        cur = cur + "\n"
      }
      let merged = cur + String(line) + "\n"
      setTplText(merged)
      if (rt.setSongText) {
        rt.setSongText(merged)
      } else {
        if (rt.tplTextarea) {
          rt.tplTextarea.value = merged
        }
      }
    }
  }

  let beatCells = []
  let bi = 0
  while (bi < 16) {
    beatCells.push(<span class="tpl-beat-cell">{String(bi + 1)}</span>)
    bi = bi + 1
  }

  fn tplSetPlaybackHighlight(step, playing) {
    if (rt) {
      rt.playbackUiStep = step
      rt.playing = playing
    }
    let cells = document.querySelectorAll(".tpl-beat-cell")
    let s = Math.floor(step) % 16
    let ci = 0
    while (ci < cells.length) {
      if (playing && ci === s) {
        cells[ci].classList.add("tpl-beat-cell-active")
      } else {
        cells[ci].classList.remove("tpl-beat-cell-active")
      }
      ci = ci + 1
    }
    if (rt && rt.dispatchPlaybackHighlight) {
      rt.dispatchPlaybackHighlight(step, playing)
    }
  }

  if (rt) {
    rt.setPlaybackHighlight = tplSetPlaybackHighlight
  }

  fn getTextareaValue() {
    if (rt && rt.getSongText) {
      return rt.getSongText()
    }
    if (rt && rt.tplTextarea) {
      return rt.tplTextarea.value
    }
    if (tplText === null) {
      return ""
    }
    return tplText
  }

  fn onApply() {
    let val = getTextareaValue()
    let r = applyTplSource(project, val)
    let errStr = ""
    let errList = r.errors
    if (!errList) {
      errList = []
    }
    let ei = 0
    while (ei < errList.length) {
      errStr = errStr + "L" + String(errList[ei].line) + ": " + errList[ei].msg + "\n"
      ei = ei + 1
    }
    setTplErr(errStr)
    setProject(project)
    flushTplSongEditorFromProject(project, setTplText, rt)
  }

  fn onSync() {
    setTplErr("")
    setProject(project)
    flushTplSongEditorFromProject(project, setTplText, rt)
  }

  fn tplSongMirrorRefresh() {
    let pre = document.getElementById("tpl-song-hl-pre")
    if (!rt) {
      return
    }
    let ta = rt.tplSongMirrorTa
    if (!pre || !ta) {
      return
    }
    let src = ta.value
    let st = 0
    if (typeof rt.playbackUiStep === "number") {
      st = rt.playbackUiStep
    }
    if (rt.tplLastHighlightSource === src && rt.tplLastHighlightPlaybackStep === st) {
      return
    }
    rt.tplLastHighlightSource = src
    rt.tplLastHighlightPlaybackStep = st
    let n = rt.tplLastAppliedLineCount ? rt.tplLastAppliedLineCount : 0
    let t = rt.tplLastAppliedAt ? rt.tplLastAppliedAt : 0
    pre.innerHTML = tplDocumentToHighlightHtml(src, st, !!rt.playing, n, t)
  }

  fn attachSongTextarea() {
    if (!rt) {
      return
    }
    let slot = document.getElementById("tpl-song-textarea-slot")
    if (!slot) {
      return
    }
    if (rt.tplSongMirrorTa && rt.tplSongMirrorWrap) {
      if (!slot.contains(rt.tplSongMirrorWrap)) {
        slot.innerHTML = ""
        slot.appendChild(rt.tplSongMirrorWrap)
      }
      let ta = rt.tplSongMirrorTa
      let pre = document.getElementById("tpl-song-hl-pre")
      rt.tplTextarea = ta
      rt.getSongText = () => {
        return ta.value
      }
      rt.setSongText = (s) => {
        rt.tplSongEditorEcho = s
        ta.value = s
        if (pre) {
          let st = 0
          if (typeof rt.playbackUiStep === "number") {
            st = rt.playbackUiStep
          }
          let n = rt.tplLastAppliedLineCount ? rt.tplLastAppliedLineCount : 0
          let t = rt.tplLastAppliedAt ? rt.tplLastAppliedAt : 0
          rt.tplLastHighlightSource = s
          rt.tplLastHighlightPlaybackStep = st
          pre.innerHTML = tplDocumentToHighlightHtml(s, st, !!rt.playing, n, t)
        }
      }
      rt.dispatchPlaybackHighlight = () => {
        tplSongMirrorRefresh()
      }
      if (document.activeElement !== ta && ta.value !== tplText) {
        rt.tplSongEditorEcho = tplText
        ta.value = tplText
        tplSongMirrorRefresh()
      }
      return
    }
    slot.innerHTML = ""
    let wrap = document.createElement("div")
    wrap.className = "tpl-song-mirror-stack"
    let pre = document.createElement("pre")
    pre.id = "tpl-song-hl-pre"
    pre.className = "tpl-song-highlight-layer"
    pre.setAttribute("aria-hidden", "true")
    let ta = document.createElement("textarea")
    ta.className = "tpl-song-input-layer"
    ta.rows = taRows
    ta.placeholder = "deck song…"
    rt.tplSongEditorEcho = tplText
    ta.value = tplText
    ta.setAttribute("spellcheck", "false")
    ta.oninput = () => {
      if (ta.value === rt.tplSongEditorEcho) {
        return
      }
      rt.tplSongEditorEcho = ta.value
      setTplText(ta.value)
      tplSongMirrorRefresh()
    }
    ta.onscroll = () => {
      pre.scrollTop = ta.scrollTop
      pre.scrollLeft = ta.scrollLeft
    }
    wrap.appendChild(pre)
    wrap.appendChild(ta)
    slot.appendChild(wrap)
    rt.tplSongMirrorWrap = wrap
    rt.tplSongMirrorTa = ta
    rt.tplTextarea = ta
    rt.getSongText = () => {
      return ta.value
    }
    rt.setSongText = (s) => {
      rt.tplSongEditorEcho = s
      ta.value = s
      tplSongMirrorRefresh()
    }
    rt.dispatchPlaybackHighlight = () => {
      tplSongMirrorRefresh()
    }
    tplSongMirrorRefresh()
  }

  setTimeout(() => {
    attachSongTextarea()
  }, 0)

  let panelCls = "panel code-debug-panel"
  if (docked) {
    panelCls = panelCls + " code-debug-panel--dock"
  }
  let editorWrapCls = "tpl-song-editor-wrap tpl-song-editor-full"
  if (docked) {
    editorWrapCls = editorWrapCls + " tpl-song-editor-dock"
  }

  return (
    <section class={panelCls}>
      <h2>{"deck"}</h2>
      {docked ? null : (
        <Fragment>
          <p class="code-debug-hint code-debug-hint-hub">
            {
              "WebSocket / hub: use the Co-DJ panel for Connect, stream previews, and the activity log. Play streams your project deck to the gateway; agents join as separate actors. Nothing duplicated here anymore."
            }
          </p>
          <p class="code-debug-hint">{"Song editor: Apply / Sync ↔ project."}</p>
        </Fragment>
      )}
      <div class={editorWrapCls}>
        <div id="tpl-song-textarea-slot" class="tpl-song-textarea-slot" />
      </div>
      <div class="tpl-playback-strip-wrap">
        <span class="tpl-playback-strip-label">{"Step"}</span>
        <div class="tpl-playback-strip">{beatCells}</div>
      </div>
      <div class="code-debug-actions">
        <button type="button" class="code-debug-btn" onclick={onApply}>
          {"Apply deck"}
        </button>
        <button type="button" class="code-debug-btn" onclick={onSync}>
          {"Sync from project"}
        </button>
      </div>
      {tplErr !== null && tplErr.length > 0 ? <pre class="code-debug-errors">{tplErr}</pre> : null}
    </section>
  )
}