/* global React, ReactDOM, Page, MIXES */

function scEmbedUrl(trackUrl, color = "b3471d") {
  const params = new URLSearchParams({
    url: trackUrl, color: "#" + color,
    auto_play: "false", hide_related: "true", show_comments: "false",
    show_user: "true", show_reposts: "false", show_teaser: "false", visual: "true",
  });
  return `https://w.soundcloud.com/player/?${params.toString()}`;
}

function Music() {
  const { useState } = React;
  const [current, setCurrent] = useState(0);
  const mix = MIXES[current];

  return (
    <Page current="music">
      <section className="page section" data-screen-label="music">
        <div className="wrap">
          <header className="page-head">
            <div className="eyebrow">File 02 · Music</div>
            <h1 className="page-title display">Mixes &amp;<br/>edits</h1>
            <div className="page-meta mono-tiny">
              Stream · <a href="https://soundcloud.com/dj_woodi" target="_blank" rel="noopener">@dj_woodi</a>
            </div>
          </header>

          <div className="featured">
            <div className="featured-head">
              <div>
                <h2 className="featured-title">{mix.title}</h2>
                <div className="mono-tiny" style={{ marginTop: 6 }}>{mix.sub} · {mix.bpm} BPM</div>
              </div>
              <a className="featured-meta" href={mix.scUrl} target="_blank" rel="noopener">
                Open on SoundCloud ↗
              </a>
            </div>
            <div className="sc-frame">
              <iframe
                key={mix.scUrl}
                width="100%" height="320"
                scrolling="no" frameBorder="no" allow="autoplay"
                src={scEmbedUrl(mix.scUrl)}
                title={mix.title}
              />
            </div>
          </div>

          <ul className="mix-list">
            {MIXES.map((m, i) => (
              <li key={m.id} className={"mix-row " + (i === current ? "is-active" : "")}
                  onClick={() => setCurrent(i)}>
                <span className="mix-num">{String(i + 1).padStart(2, "0")}</span>
                <span className="mix-meta">
                  <span className="mix-title">{m.title}</span>
                  <span className="mix-sub">{m.sub}</span>
                </span>
                <span className="mix-bpm">{m.bpm} BPM</span>
                <span className="mix-go">{i === current ? "Now playing" : "Play →"}</span>
              </li>
            ))}
          </ul>

          <div className="page-nav">
            <a href="/about">← About</a>
            <a href="/video">Video →</a>
          </div>
        </div>
      </section>
    </Page>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Music />);