import classNames from 'classnames';
import React from 'react';
import PropTypes from 'prop-types';

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

export default function OptionsList(
  {
    theme,
    optionGroups,
    changeOption,
    changeGroup,
    selecteds,
    checkAll,
    uncheckAll,
    toggleOptionsList,
    activeValue,
    handleKeyDown,
    setActiveOption,
    resetActiveOption,
  }
) {
  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'],
          )
        }
      >
        {
          optionGroups.map((group, index) => (
            <OptionsGroup
              key={index}
              theme={theme}
              group={group}
              changeOption={changeOption}
              changeGroup={changeGroup}
              selecteds={selecteds}
              activeValue={activeValue}
              handleKeyDown={handleKeyDown}
              setActiveOption={setActiveOption}
              resetActiveOption={resetActiveOption}
            />
          ))
        }
      </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,
    }),
  ),
  optionGroups: PropTypes.arrayOf(
    PropTypes.shape({
      label: PropTypes.string,
      options: PropTypes.arrayOf(
        PropTypes.shape({
          values: PropTypes.array,
          label: PropTypes.string,
        }),
      ),
    }),
  ),
};
