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

import KdItemSelected from '../KdItemSelected';

function KdChickletsContainer({
  showAtBeginning,
  items,
  isChickletNone = false,
  theme,
  labelHandler,
}) {
  const buildSelectedItem = (item, index) => (
    <KdItemSelected
      isChickletNone={isChickletNone}
      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,
      })}
    >
      {showAtBeginning ? items.reverse().map(buildSelectedItem) : items.map(buildSelectedItem)}
    </div>
  );
}

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

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

export default KdChickletsContainer;
