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

const labelOption = (theme, group, changeGroup, selecteds) => {
  return (
    group.label && group.label.length &&
    <li>
      <button
        className={
          classNames(
            'c-options-group__group-header',
            theme['c-options-group__group-header'],
          )
        }
        onClick={(event) => {
          event.preventDefault();
          if (
            intersectionby(
              selecteds, group.options,
            'value').length === group.options.length
          ) {
            changeGroup(group, false);
          } else {
            changeGroup(group, true);
          }
        }}
      >
        {group.label}
      </button>
    </li>
  );
};

export default function OptionsGroup({
  theme,
  group,
  changeOption,
  changeGroup,
  selecteds,
  optionRef,
  activeValue,
  handleKeyDown,
  setActiveOption,
  resetActiveOption,
}) {
  return (
    <ul
      className={
        classNames(
          'c-options-group',
          theme['c-options-group'],
        )
      }
    >
      {labelOption(theme, group, changeGroup, selecteds)}
      {
        group.options.map((option, index) => (
          <li
            key={option.value}
            className={
              classNames(
                {
                  'c-options-group__group-option--active': (option.value === activeValue),
                  [theme['c-options-group__group-option--active']]: (option.value === activeValue),
                }
              )
            }
            onMouseEnter={() => setActiveOption(option.value)}
            onMouseLeave={resetActiveOption}
          >
            <label
              className={
                classNames(
                  'c-options-group__group-option',
                  theme['c-options-group__group-option'],
                )
              }
              htmlFor={option.value}
            >
              <input
                onKeyDown={handleKeyDown}
                tabIndex={index}
                id={option.value}
                key={option.value}
                value={option.value}
                type="checkbox"
                onChange={(event) => {
                  const { value, checked } = event.target;
                  const opt = group.options.find(o => o.value === value);
                  changeOption(opt, checked);
                }}
                checked={!!selecteds.find(o => o.value === option.value)}
                ref={optionRef}

              />
              {option.label}
            </label>
          </li>
        ))
      }
    </ul>
  );
}

OptionsGroup.propTypes = {
  theme: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.func,
  ]).isRequired,
  changeOption: PropTypes.func,
  changeGroup: PropTypes.func,
  selecteds: PropTypes.arrayOf(
    PropTypes.shape({
      value: PropTypes.string,
      label: PropTypes.label,
    }),
  ),
  group: PropTypes.shape({
    label: PropTypes.string,
    options: PropTypes.arrayOf(
      PropTypes.shape({
        value: PropTypes.string,
        label: PropTypes.string,
      }),
    ),
  }),
  optionRef: PropTypes.func,
  activeValue: PropTypes.string,
  handleKeyDown: PropTypes.func,
  setActiveOption: PropTypes.func,
  resetActiveOption: PropTypes.func,
};
