text: import _InfiniteScroll from "desktop/components/react/infinite_scroll/InfiniteScroll"
  import _Jump from "desktop/components/jump/react"
  import _MasonryArtwork from "desktop/apps/auction/components/artwork_browser/main/artwork/MasonryArtwork"
  import _GridArtwork from "desktop/apps/auction/components/artwork_browser/main/artwork/GridArtwork"
  import _ListArtwork from "desktop/apps/auction/components/artwork_browser/main/artwork/ListArtwork"
  import LoadingSpinner from "desktop/apps/auction/components/artwork_browser/main/LoadingSpinner"
  import _MasonryGrid from "desktop/components/react/masonry_grid/MasonryGrid"
  import PropTypes from "prop-types"
  import React, { Component } from "react"
  import block from "bem-cn-lite"
  import { get } from "lodash"
  import { infiniteScroll } from "desktop/apps/auction/actions/artworkBrowser"
  import { connect } from "react-redux"
  
  // FIXME: Rewire
  let InfiniteScroll = _InfiniteScroll
  let Jump = _Jump
  let MasonryArtwork = _MasonryArtwork
  let GridArtwork = _GridArtwork
  let ListArtwork = _ListArtwork
  let MasonryGrid = _MasonryGrid
  
  class ArtworkDisplay extends Component {
    static propTypes = {
      infiniteScrollAction: PropTypes.func.isRequired,
      isFetchingArtworks: PropTypes.bool.isRequired,
      isListView: PropTypes.bool.isRequired,
      isMobile: PropTypes.bool.isRequired,
      saleArtworks: PropTypes.array.isRequired,
    }
  
    state = {
      isMounted: false,
    }
  
    componentDidMount() {
      this.setState({
        isMounted: true,
      })
    }
  
    render() {
      const {
        infiniteScrollAction,
        isFetchingArtworks,
        isListView,
        isMobile,
        saleArtworks,
      } = this.props
  
      const listType = isListView ? "--list" : ""
  
      const calculateScrollPosition =
        isMobile && this.state.isMounted && isFetchingArtworks
      let showFullScreenSpinner = false
  
      if (calculateScrollPosition) {
        showFullScreenSpinner = window.scrollY < window.innerHeight
      }
  
      const b = block("auction-page-ArtworkDisplay")
  
      return (
        <InfiniteScroll
          triggerElement=".auction-page-ArtworkDisplay, .auction-page-ArtworkDisplay__artworks--list"
          onTrigger={infiniteScrollAction}
        >
          <div className={b()}>
            <div className={b(`artworks${listType}`)}>
              {showFullScreenSpinner && <LoadingSpinner fullscreen />}
  
              {(() => {
                if (isMobile) {
                  if (isListView) {
                    return (
                      <div>
                        {saleArtworks.map((saleArtwork, key) => (
                          <ListArtwork saleArtwork={saleArtwork} key={key} />
                        ))}
  
                        <LoadingSpinner />
                      </div>
                    )
  
                    // GridView
                  } else {
                    return (
                      <div>
                        <MasonryGrid
                          columnCount={2}
                          items={saleArtworks}
                          mask={false}
                          getAspectRatio={saleArtwork => {
                            return get(
                              saleArtwork,
                              "artwork.images.0.aspect_ratio"
                            )
                          }}
                          getDisplayComponent={saleArtwork => {
                            return <MasonryArtwork saleArtwork={saleArtwork} />
                          }}
                        />
  
                        <LoadingSpinner />
                      </div>
                    )
                  }
  
                  // Desktop
                } else {
                  const DisplayComponent = isListView ? ListArtwork : GridArtwork
  
                  return (
                    <div>
                      {saleArtworks.map(saleArtwork => (
                        <DisplayComponent
                          key={saleArtwork.id}
                          saleArtwork={saleArtwork}
                        />
                      ))}
  
                      <Jump
                        threshold={
                          typeof window !== "undefined"
                            ? window.innerHeight * 2
                            : 0
                        }
                        direction="bottom"
                        element=".auction-artworks-HeaderDesktop"
                        offset=".mlh-navbar"
                      />
  
                      <LoadingSpinner />
                    </div>
                  )
                }
              })()}
            </div>
          </div>
        </InfiniteScroll>
      )
    }
  }
  
  const mapStateToProps = state => {
    const { auction, isMobile } = state.app
  
    return {
      allFetched: state.artworkBrowser.allFetched,
      isFetchingArtworks: state.artworkBrowser.isFetchingArtworks,
      isListView: state.artworkBrowser.isListView,
      isMobile,
      isClosed: auction.isClosed(),
      saleArtworks: state.artworkBrowser.saleArtworks,
      saleId: auction.get("id"),
    }
  }
  
  const mapDispatchToProps = {
    infiniteScrollAction: infiniteScroll,
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(ArtworkDisplay)
  
  export const test = { ArtworkDisplay }
  