import React from 'react'
import Masonry from 'react-masonry-css'
import InfiniteScroll from 'react-infinite-scroller'
import { Empty, Spin } from 'antd'
import ItemComponent, { IItemType } from './Item.component'

import styles from '../css/Masonry.module.scss'

interface IMasonryContainerProps {
  hasMore: boolean
  loading?: boolean
  breakpointColumnsObj?: {
    [key: number]: number
    default: number
  }
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  dataSource: any[]
  itemType: IItemType
  loadMore: (page: number) => void
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  onItemClick?: (item: any) => void
}
/**
 * 瀑布流容器
 * initialLoad-不让它进入直接加载
 * useWindow 监听window滚动条
 */
const MasonryContainer: React.FC<IMasonryContainerProps> = props => {
  const {
    // children,
    loadMore,
    hasMore = true,
    loading = false,
    breakpointColumnsObj = { default: 5, 1622: 3, 780: 3, 540: 1 },
    dataSource,
    itemType,
    onItemClick
  } = props
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const handleClick = (item: any) => {
    onItemClick && onItemClick(item)
  }
  return (
    <InfiniteScroll initialLoad={false} pageStart={0} loadMore={loadMore} hasMore={hasMore} useWindow>
      <Masonry
        breakpointCols={breakpointColumnsObj}
        className={styles['my-masonry-grid']}
        columnClassName={styles['my-masonry-grid_column']}
      >
        {dataSource.map((item, index) => (
          <div className="content-item" key={index}>
            <ItemComponent
              item={item}
              itemType={item?._itemType || item.Source || itemType}
              handleItemClick={handleClick}
            />
          </div>
        ))}
      </Masonry>
      {loading && (
        <div className={styles['content-none']}>
          <Spin />
        </div>
      )}
      {!hasMore && dataSource.length > 10 && <div className={styles['content-none']}>已经到底了~</div>}
      {!dataSource.length && !loading && <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
    </InfiniteScroll>
  )
}

export default MasonryContainer
