import React from 'react';
import InfiniteScroll from 'react-infinite-scroller';

import {formatDuration} from './utils.js';
import logo from './logo.svg';
import './AlbumList.css';

function _albumProps(albums, index) {
  if (index === 0) {
    return {showArtist: true, showType: true}
  }

  if (albums[index-1].artist !== albums[index].artist) {
    return {showArtist: true, showType: true}
  }

  let showType = (albums[index-1].type !== albums[index].type);
  return {showType};
}

function Album({album, showArtist, showType, onPlayAlbum}) {
  function onClick(album) {
    return (e) => {
      e.preventDefault()
      onPlayAlbum(album)
    }
  }
  return (
    <div>
      {showArtist && (<h3>{album.artist}</h3>)}
      {showType && (<h4>{album.type}</h4>)}
      <div className="album">
        <div><img src={album.cover || logo} alt={album.album} /></div>
        <div>
          <span>{album.year}</span>
          <span>{album.country}</span>
          <span>{album.track_count}&nbsp;@&nbsp;{formatDuration(album.total_duration)}</span>
        </div>
        <div>
          <span><a href={`/album/${album.id}`} onClick={onClick(album)}>{album.album}</a></span>
          <span>{album.publisher}</span>
          <span>{album.genre}</span>
        </div>
      </div>
    </div>
  )
}

export default function AlbumList({loadMore, hasMore, albums, title, error, ...props}) {
  return (
    <div className="AlbumList">
      <h2>{title}</h2>
      { error ? (
          <div className="error">{error}></div>
        ) : (
          <InfiniteScroll
            loadMore={loadMore}
            hasMore={hasMore}
            loader={<div className="loader" key={0}>Loading ...</div>}
            initialLoad={false}
          >
            {albums.map((album, idx) => (
              <Album key={idx} album={album} {..._albumProps(albums, idx)} {...props} />
            ))}
         </InfiniteScroll>
        )
      }
    </div>
  )
}