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

import KdItemSelected from '../KdItemSelected';

function KdChickletsContainer({ items, isChickletNone = false, theme, labelHandler }) {
  const buildSelectedItem = (item, index) =>
    <KdItemSelected
      theme={theme}
      labelHandler={labelHandler}
      {...item}
      key={item.value + index}
    />;
  return (
    <div
      className={
        classNames({
          'c-kd-selected-chicklets': !isChickletNone,
          'c-kd-selected-chicklets--chicklet_none': isChickletNone,
          [theme['c-kd-selected-chicklets']]: !isChickletNone,
          [theme['c-kd-selected-chicklets--chicklet_none']]: isChickletNone,
        })
      }
    >
      {items.map(buildSelectedItem)}
    </div>
  );
}

KdChickletsContainer.propTypes = {
  theme: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.func,
  ]).isRequired,
  items: PropTypes.arrayOf(PropTypes.object),
  labelHandler: PropTypes.func,
};

KdChickletsContainer.defaultProps = {
  items: [],
};

export default KdChickletsContainer;
