import React, { useState, useEffect } from 'react';

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import find from 'lodash/find';
import SimpleTooltip from 'components/items/SimpleTooltip';
import styleIdentifiers from './listItems.scss';

const styles = classNames.bind(styleIdentifiers);

export interface ListItems {}

const ListItems = (props: ListItemsProps) => {
  const { dataList, limit, item, noIcon, noText, list } = props;

  if (!dataList) return false;

  const renderItem = (element, index) => {
    if (!element) return false;

    return (
      <React.Fragment key={index}>
        <div className={styles('item')}>
          {!noIcon && element.thumbnail && <img src={element.thumbnail.large} alt="thumbnail" />}
          {!noText && <TextItem path={element.title} />}
        </div>
      </React.Fragment>
    );
  };

  if (Array.isArray(list)) {
    return (
      <div className={styles('list-items')}>
        {list.map((elem, index) => {
          const listItem = find(dataList, {
            _id: elem,
          });

          if (limit && index >= limit) return false;

          return renderItem(listItem, index);
        })}
        {list.length > limit && <span className={styles('item')}>...</span>}
      </div>
    );
  }

  const element = find(dataList, {
    _id: item,
  });

  return renderItem(element, 0);
};

export default ListItems;
