import React from "react";
import {
  registerComponent,
  Components,
  ComponentsTable
} from "meteor/vulcan:lib";

const ComponentHOCs = ({ document }) => (
  <div>
    <ul>
      {document.hocs.map((hoc, i) => (
        <li key={i}>{typeof hoc.name === "string" ? hoc.name : hoc[0].name}</li>
      ))}
    </ul>
  </div>
);

const ComponentsDashboard = props => (
  <div className="components">
    <Components.Datatable
      showSearch={false}
      showNew={false}
      showEdit={false}
      data={Object.values(ComponentsTable)}
      columns={[
        "name",
        {
          name: "hocs",
          component: ComponentHOCs
        }
      ]}
    />
  </div>
);

registerComponent("Components", ComponentsDashboard);