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

import KdItemSelected from '../KdItemSelected';

function KdSelectItemContainer({ items, chicklets, isChickletNone = false }) {
  const buildSelectedItem = item => <KdItemSelected chicklets={chicklets} {...item} />;

  return (
    <div
      className={
        classNames({
          'c-kd-selected-chicklets': !isChickletNone,
          'c-kd-selected-chicklets--chicklet_none': isChickletNone,
        })
      }
    >
      {items.map(buildSelectedItem)}
    </div>
  );
}

KdSelectItemContainer.propTypes = {
  items: PropTypes.arrayOf(PropTypes.object),
  chicklets: PropTypes.shape({
    sortable: PropTypes.bool,
    visible: PropTypes.bool,
    fullwidth: PropTypes.bool,
    prefix: PropTypes.string,

    buttons: PropTypes.shape({
      ascDesc: PropTypes.shape({ visible: PropTypes.bool }),
      info: PropTypes.shape({ visible: PropTypes.bool }),
    }),

    events: PropTypes.shape({
      onClick: PropTypes.func,
      onClose: PropTypes.func,
    }),

    clearAll: PropTypes.shape({
      visible: PropTypes.bool,
      onClick: PropTypes.func,
    }),
  }),
};
KdSelectItemContainer.defaultProps = {
  items: [],
};

export default KdSelectItemContainer;
