import React from 'react';
import T from 'prop-types';
import _ from 'lodash';
// import ReactTooltip from 'react-tooltip';

const categories = [
  {
    id: 'Core',
    parameters: [],
  },
  {
    id: 'Additional',
    info:
      'The following pollutants are less common than the core parameters. You may have to broaden other search filters when using these parameters to find sufficient results',
    parameters: [],
  },
];

function ParamSelect(props) {
  const { parameters, onFilterSelect, selected } = props;
  return (
    <ul
      role="menu"
      data-cy="filter-parameters"
      className="drop__menu drop__menu--select scrollable padded"
    >
      {_.chain(parameters)
        .uniq('id')
        .reduce(([core, additional], param) => {
          if (param.isCore) {
            core.parameters.push(param);
          } else {
            additional.parameters.push(param);
          }
          return [core, additional];
        }, categories)
        .map(({ id, /* info,*/ parameters: list }) => {
          return (
            <React.Fragment key={id}>
              <p
                className="drop__menu-section-title"
                data-tip
                data-for={`${id}-info`}
              >
                {id}
              </p>

              {/*info && (
                <ReactTooltip id={`${id}-info`} place="bottom" effect="float">
                  {info}
                </ReactTooltip>
              )*/}

              {_.sortBy(list).map(param => {
                return (
                  <label
                    className="form__option form__option--custom-checkbox"
                    htmlFor={param.id}
                    key={param.id}
                  >
                    <input
                      type="checkbox"
                      value={param.displayName}
                      id={param.id}
                      name="form-checkbox"
                      onChange={() => {
                        onFilterSelect('parameters', param.id);
                      }}
                      checked={selected.parameters.includes(param.id)}
                    />
                    <span className="form__option__text">
                      {param.displayName}
                    </span>
                    <span className="form__option__ui"></span>
                  </label>
                );
              })}
            </React.Fragment>
          );
        })
        .value()}
    </ul>
  );
}
ParamSelect.propTypes = {
  parameters: T.array,
  onFilterSelect: T.func,
  selected: T.object,
};
export default ParamSelect;

@@ -425,16 +425,119 @@
  %7D,%0A%5D;%0A%0A
+/*%0A * Select parameters from a list using checkboxes,%0A * assumes Core and Additional as categories%0A */%0A
 function
@@ -1788,32 +1788,129 @@
  key=%7Bparam.id%7D%0A
+                      data-cy='filter-menu-item'%0A                    data-hook='dropdown:close'%0A%0A
                 
@@ -2234,16 +2234,56 @@
      %7D%7D%0A
+                    data-cy=%7Bparam.id%7D%0A%0A
         

Fix test