import classNames from 'classnames';
import React, { PropTypes } from 'react';

import ControlsBar from './ControlsBar';
import OptionsGroup from './OptionsGroup';

export default function OptionsList(
  {
    theme,
    dropDownOptions,
    changeOption,
    changeGroup,
    selecteds,
    checkAll,
    uncheckAll,
    toggleOptionsList,
  }
) {
  return (
    <div
      className={
        classNames(
          'c-options-list',
          theme['c-options-list'],
        )
      }
    >
      <ControlsBar
        checkAll={checkAll}
        uncheckAll={uncheckAll}
        close={toggleOptionsList}
        theme={theme}
      />
      <div
        className={
          classNames(
            'c-options-list__groups-container',
            theme['c-options-list__groups-container'],
          )
        }
      >
        {
          dropDownOptions.map((group, index) => (
            <OptionsGroup
              key={group.label + index}
              theme={theme}
              group={group}
              changeOption={changeOption}
              changeGroup={changeGroup}
              selecteds={selecteds}
            />
          ))
        }
      </div>
    </div>
  );
}

OptionsList.propTypes = {
  theme: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.func,
  ]).isRequired,
  changeOption: PropTypes.func,
  changeGroup: PropTypes.func,
  checkAll: PropTypes.func,
  uncheckAll: PropTypes.func,
  toggleOptionsList: PropTypes.func,
  selecteds: PropTypes.arrayOf(
    PropTypes.shape({
      value: PropTypes.string,
      label: PropTypes.label,
    }),
  ),
  dropDownOptions: PropTypes.arrayOf(
    PropTypes.shape({
      label: PropTypes.string,
      options: PropTypes.arrayOf(
        PropTypes.shape({
          value: PropTypes.string,
          label: PropTypes.string,
        }),
      ),
    }),
  ),
};
