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

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

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

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

List.propTypes = {
  isIcon: bool.isRequired,
  list: array.isRequired,
  itemKey: string,
  activeItems: array,
  activeItem: string,
  activeItemRaw: oneOfType([string, number]),
  onClick: func.isRequired,
};

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

export default List;
