PresetBar.tish

// A compact contextual preset control: a "load" dropdown + a "Save" button, shown WHERE you edit the
// thing (so the load target is implicit). Used for sequence / rack / session presets, matching the
// instrument-panel and deck "load set" pattern. items = [{name, tpl}]; onLoad(name); onSave().

import { h } from '@tishlang/lattish'
import { IkSelect } from './InstrumentKit.tish'

// The common panel header: a title/brand on the LEFT, load/save (or any control) aligned to the RIGHT.
// Used by the sequence, session, instrument and deck panels so load/save lives consistently in each head.
export fn PanelHeader(left, right) {
  return (
    <div class="panel-head">
      <div class="panel-head-l">{left}</div>
      <div class="panel-head-r">{right}</div>
    </div>
  )
}

export fn PresetBar(label, items, onLoad, onSave, scopeNote, onDelete) {
  let options = []
  let i = 0
  while (i < items.length) {
    options.push({ value: items[i].name, label: items[i].name })
    i = i + 1
  }

  let loadIcon = (
    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ display: "block" }}>
      <path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2z"/>
    </svg>
  )

  let saveIcon = (
    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ display: "block" }}>
      <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
      <polyline points="17 21 17 13 7 13 7 21"/>
      <polyline points="7 3 7 8 15 8"/>
    </svg>
  )

  return (
    <div class="preset-bar">
      {IkSelect({
        class: "preset-bar-select",
        value: "",
        placeholder: loadIcon,
        options: options,
        onChange: (v) => {
          if (v && v.length > 0) {
            onLoad(v)
          }
        },
        onDelete: (onDelete !== null) ? ((v) => {
          if (v && v.length > 0) {
            onDelete(v)
          }
        }) : null
      })}
      <button type="button" class="preset-bar-save" onclick={onSave} title={"Save current " + label + " as a preset"}>
        {saveIcon}
      </button>
      {scopeNote !== null && scopeNote.length > 0 ? <span class="preset-bar-scope">{scopeNote}</span> : null}
    </div>
  )
}