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

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>
    <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>
      <ul id="packages">
        ${R.map(
          (pkg) =>
            html`<li>
              <button @click=${(_) => selectPackage(dispatchers, pkg)}>
                ${pkg}
              </button>
            </li>`,
          R.sortBy(R.toLower, packages)
        )}
      </ul>
      ${Package({ package: currentPackage, symbols })}
    </main>
  `;