// The shared .m files, shown read-only.  The editable script in each lab is
// the method itself; these are the pieces every lab is allowed to assume.
import { useState } from 'react'

const raw = import.meta.glob('../matlab/*.m', { query: '?raw', import: 'default', eager: true }) as Record<
  string,
  string
>

const FILES = Object.entries(raw)
  .map(([path, content]) => ({ name: path.slice(path.lastIndexOf('/') + 1), content }))
  .sort((a, b) => a.name.localeCompare(b.name))

export default function LibraryView() {
  const [open, setOpen] = useState<string | null>(FILES[0]?.name ?? null)
  return (
    <article className="chapter">
      <header className="chapter-head">
        <div className="chapter-part">Reference</div>
        <h2>The shared MATLAB library</h2>
        <p className="chapter-blurb">
          Every lab boots with these function files in its session, alongside the editable script and a driver that
          reads the controls and writes the figures. They are the small pieces that would otherwise be repeated in
          every chapter.
        </p>
      </header>
      <div className="lib-list">
        {FILES.map((f) => (
          <div className="lib-file" key={f.name}>
            <button className="lib-name" onClick={() => setOpen(open === f.name ? null : f.name)}>
              {open === f.name ? '▾' : '▸'} {f.name}
            </button>
            {open === f.name && <pre className="lib-src">{f.content}</pre>}
          </div>
        ))}
      </div>
    </article>
  )
}