import { html } from "https://unpkg.com/lit-html@1.2.1/lit-html.js?module";
import { selectPackage } from "./api.js";

const PackageSymbol = ({
  name,
  "value-bound": v,
  "function-bound": f,
  "macro-bound": m,
}) =>
  html`
    <tr>
      <td>${name}</td>
      <td>${v}</td>
      <td>${f}</td>
      <td>${m}</td>
    </tr>
  `;

const Package = ({ pkg, symbols }) => html`
  <div id="package-section">
    <h2>${pkg}</h2>
    <table id="package">
      <thead>
        <th>Symbol Name</th>
        <th>Value Bound?</th>
        <th>Function Bound?</th>
        <th>Macro Bound?</th>
      </thead>
      <tbody>
        ${R.map(
          (v) => PackageSymbol(v),
          R.sortBy(
            R.compose(R.toLower, ({ name }) => name),
            symbols
          )
        )}
      </tbody>
    </table>
  </div>
`;

export const PackageList = (
  dispatchers,
  { packages, currentPackage, symbols }
) =>
  html`
    <main>
      <div>
        <ul id="packages">
          ${R.map(
            (pkg) =>
              html`<li>
                <button @click=${(_) => selectPackage(dispatchers, pkg)}>
                  ${pkg}
                </button>
              </li>`,
            R.sortBy(R.toLower, packages)
          )}
        </ul>
      </div>
      ${Package({ pkg: currentPackage, symbols })}
    </main>
  `;