import React from 'react';
import { number, string, array, func, oneOfType } from 'prop-types';
import { ListWrap, Item } from '../../../shared';

class CustomItemList extends React.Component {
  shouldComponentUpdate(nextProps) {
    if (nextProps.ItemTemplate !== this.props.ItemTemplate) return true;
    if (nextProps.list !== this.props.list) return true;
    if (nextProps.activeItems !== this.props.activeItems) return true;
    if (nextProps.activeItem !== this.props.activeItem) return true;
    return false;
  }

  render() {
    const { ItemTemplate, list, itemKey, activeItems, activeItem, onClick } = this.props;

    return (
      <ListWrap>
        {
          list.map((item) => {
            const label = itemKey ? item[itemKey] : item;
            const isActive = activeItems.includes(label) || activeItem === label;
            return (
              <Item isActive={isActive} onClick={() => onClick(item)} key={label}>
                <ItemTemplate item={item} isActive={isActive} />
              </Item>
            );
          })
        }
      </ListWrap>
    );
  }
}

CustomItemList.propTypes = {
  ItemTemplate: func.isRequired,
  list: array.isRequired,
  itemKey: string,
  activeItems: array,
  activeItem: oneOfType([string, number]),
  onClick: func.isRequired,
};

CustomItemList.defaultProps = {
  itemKey: undefined,
  activeItems: [],
  activeItem: undefined,
};

export default CustomItemList;
