import React, { useState } from 'react'
import InfiniteScroll from 'react-infinite-scroller'

import { Spin, List } from 'antd'

import { IAudioDetail } from 'Activity/Activity.service'
import { IRoadshowistItem } from 'Material/MicroRoadshow.service'
import ItemComponent, { IItemType } from './Item.component'
import AudioFix from 'Activity/components/AudioFix'
import styles from '../css/Roadshow.module.scss'

interface IRoadshowContainerProps {
  hasMore: boolean
  loading?: boolean
  loadMore: (page: number) => void
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  dataList: IRoadshowistItem[]
}
const RoadshowContainer: React.FC<IRoadshowContainerProps> = props => {
  const { loadMore, hasMore = true, dataList, loading = false } = props
  const [audioId, setAudioId] = useState<number>(0)
  const [audioItem, setAudioItem] = useState<IAudioDetail>()
  const [audioVisible, setAudioVisible] = useState<boolean>(false)

  /* 音频播放 */
  const handleVideoAudioClick = (item: IRoadshowistItem) => {
    // e.stopPropagation()
    if ((item.Type === 1 || item.Type === 4) && audioId !== item.SourceId) {
      setAudioId(item.SourceId)
      setAudioItem({
        ActivityId: item.ActivityId,
        Name: item.Title,
        Url: item.ResourceUrl,
        Type: item.Type,
        SourceId: item.SourceId
      })
      setAudioVisible(true)
    }
  }
  /* 音频播放的关闭 */
  const handleCloseAudio = (e: React.MouseEvent<HTMLDivElement>) => {
    e.stopPropagation()
    setAudioId(0)
    setAudioItem(undefined)
    setAudioVisible(false)
  }

  return (
    <>
      <InfiniteScroll initialLoad={false} pageStart={0} loadMore={loadMore} hasMore={hasMore} useWindow>
        <Spin spinning={loading}>
          <List
            grid={{ gutter: 16, xs: 1, sm: 1, md: 2, lg: 3, xl: 3, xxl: 5 }}
            dataSource={dataList as []}
            renderItem={(item: IRoadshowistItem) => (
              <div className={styles['roadshow-content-item']} key={item.ActivityId}>
                <ItemComponent
                  item={item}
                  itemType={IItemType.RoadshowLibrary}
                  handleItemClick={handleVideoAudioClick}
                  audioPlayId={audioId}
                />
              </div>
            )}
          />
        </Spin>
      </InfiniteScroll>
      <AudioFix audioDetail={audioItem as IAudioDetail} visible={audioVisible} onClose={handleCloseAudio} />
    </>
  )
}

export default RoadshowContainer
