// @flow
import { Element, styled } from '@siteone/system-core'
import get from 'lodash/get'
import React from 'react'
import InfiniteScroll from 'react-infinite-scroller'
import DropZone from '../DropZone'
import EmptyDropZone from '../EmptyDropZone'
import Context from '../EventsContext'
import DefaultMediaItem from './DefaultMediaItem'
import MediaListItem from './MediaListItem'
import MediaListItemDraggable from './MediaListItemDraggable'

type Props = {
  media: Array<Object>,
  loadMore: Function,
  hasNext: boolean,
}

const Base = styled(Element)`
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 10px;
`

class MediaList extends React.PureComponent<Props> {
  static contextType = Context;

  render () {
    const {
      media,
      loadMore,
      hasNext,
      isLoading,
      withControls,
      withFolders,
    } = this.props
    const isEditable = get(this.context, 'selectedCat.isEditable')
    const ItemComponent = withFolders ? MediaListItemDraggable : MediaListItem
    const filteredMedia = Array.isArray(media) ? media.filter(({ props: { url = '' } = {} }) => Array.isArray(this.context.accept) ? this.context.accept.some((suffix) => url.includes(suffix)) : true) : []

    return (
      <DropZone >
        {Array.isArray(filteredMedia) && filteredMedia.length > 0 && (
          <InfiniteScroll
            loadMore={loadMore}
            hasMore={hasNext}
            loader={<div>loading ...</div>}
            useWindow={false}
            threshold={10}
          >
            <Base key="infinityScrolle">
              {filteredMedia.map((mediaItem, k) => {
                const {
                  props,
                  onClick,
                  selected,
                  component: Component = DefaultMediaItem,
                } = mediaItem
                return (
                  <ItemComponent
                    key={props.url + `_${k}`}
                    onClick={onClick}
                    isSelected={selected}
                    mediaItem={mediaItem}
                    data={props}
                    withControls={withControls}
                  >
                    <Component {...props} />
                  </ItemComponent>
                )
              })}
            </Base>
          </InfiniteScroll>
        )}

        {media.length === 0 && !isLoading && (isEditable ? <EmptyDropZone /> : (<span>Nebyly nalezeny žádné soubory</span>))}

        {(media.length === 0 && isLoading && <span>Čekejte prosím, data se načítají...</span>)}

      </DropZone>
    )
  }
}

export default MediaList