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>
   `;