import React from 'react';
import PropTypes from 'prop-types';
import VirtualList from 'react-tiny-virtual-list';

import ListLoadingItem from './VirtualList.LoadingItem';

export default function Virtual({ loading, style = {}, list, renderItem, refCallback, height, width, itemSize }) {
  return (
    <div ref={refCallback} style={style}>
      {loading && <ListLoadingItem />}
      <VirtualList
        width={width}
        height={height}
        itemCount={list.length}
        itemSize={itemSize}
        renderItem={({ index, _style }) => (
          <div key={index} style={_style}>
            {renderItem({ index })}
          </div>
        )}
      />
    </div>
  );
}

Virtual.propTypes = {
  loading: PropTypes.bool,
  // eslint-disable-next-line react/forbid-prop-types
  style: PropTypes.object,
  // eslint-disable-next-line react/forbid-prop-types
  list: PropTypes.array,
  renderItem: PropTypes.func,
  height: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number
  ]),
  width: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number
  ]),
  itemSize: PropTypes.number
};

Virtual.defaultProps = {
  loading: undefined,
  style: undefined,
  list: undefined,
  renderItem: undefined,
  height: undefined,
  width: undefined,
  itemSize: undefined
};