import React from "react";
import groupBy from "lodash.groupby";

import { SidebarCategory } from "./components";
import Option from "./options";

export default function({
  categories,
  availableOptions,
  optionValues,
  onOptionValueChange
}) {
  const options = groupBy(availableOptions, "category");
  return categories.map(
    category =>
      options[category] ? (
        <SidebarCategory key={category} title={category}>
          {options[category].map(option => (
            <Option
              key={option.name}
              option={option}
              value={optionValues[option.name]}
              onChange={onOptionValueChange}
            />
          ))}
        </SidebarCategory>
      ) : null
  );
}