import React, { useEffect, useState } from 'react'
import useRequest from '@ahooksjs/use-request/es'
import InfiniteScroll from 'react-infinite-scroll-component'

import { List, message, Modal, Spin } from 'antd'

import { IMyActivityItem, PersonalService } from 'Personal/Personal.service'
import { IActivityTypeListItem, IAudioDetail } from 'Activity/Activity.service'
import ActivityCard from 'Activity/components/ActivityCard'
import { INewestItem } from 'Newest/Newest.service'
import { INewPermissionType } from 'Material/components/NoPermission'
import AudioFix from 'Activity/components/AudioFix'
import ActivitySpecialCard from 'Activity/components/ActivitySpecialCard'
import styles from '../css/PersonalIndex.module.scss'

/**活动日程 */
const ActivityComponent: React.FC = () => {
  const pageSize = 9
  const [audioVisible, setAudioVisible] = useState<boolean>(false)
  const [audioItem, setAudioItem] = useState<IAudioDetail>()
  const [currentPage, setCurrentPage] = useState<number>(1)
  const [hasMore, setHasMore] = useState<boolean>(false) // 列表加载更多
  const [listData, setListData] = useState<IMyActivityItem[]>([])

  const { loading: listLoading, run } = useRequest(PersonalService.getMyActivityList, {
    manual: true,
    formatResult: response => response.data.Data,
    onSuccess: res => {
      setListData([...listData, ...(res?.List || [])])
      setHasMore(res ? !res?.Paging?.IsEnd : false)
    }
  })
  useEffect(() => {
    setListData([])
    run(pageSize, currentPage)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const handleCloseAudio = () => {
    setAudioVisible(false)
  }

  const handleOpenVideoOrAudio = (item: IActivityTypeListItem | INewestItem | IMyActivityItem) => {
    if (!item.AuthInfo) {
      message.error('未知权限')
      return
    }
    if (item?.AuthInfo?.HasPermission !== INewPermissionType.OK) {
      Modal.error({
        title: '提示',
        content: item.AuthInfo.PopupMsg,
        okText: '知道了',
        centered: true
      })
      return
    }
    if (item.VoiceDetail) {
      setAudioItem({
        ActivityId: item.VoiceDetail.ActivityId,
        Name: item.VoiceDetail.Name,
        PlaySeconds: item.VoiceDetail.PlaySeconds,
        Url: item.VoiceDetail.Url,
        Type: item.VoiceDetail.Type
      })
      setAudioVisible(true)
      return
    }
    if (!item.VideoDetail) return
    const url = `${window.location.origin}/activity/video/${item.VideoDetail.Id}`
    window.open(url)
  }

  const handleGetMore = () => {
    if (listLoading || !hasMore) return
    setCurrentPage(currentPage + 1)
    run(pageSize, currentPage + 1)
  }
  return (
    <Spin spinning={listLoading}>
      <AudioFix audioDetail={audioItem as IAudioDetail} visible={audioVisible} onClose={handleCloseAudio} />
      <InfiniteScroll
        dataLength={listData?.length || 0}
        next={handleGetMore}
        hasMore={hasMore}
        loader={null}
        scrollableTarget="scrollableDiv"
      >
        <List
          grid={{ gutter: 10, xs: 1, sm: 1, md: 1, lg: 2, xl: 2, xxl: 3 }}
          className={styles['my-activity-wrapper']}
          dataSource={listData || []}
          renderItem={(item: IMyActivityItem, index) => (
            <div className={styles['my-activity-card']}>
              {item.SourceType === 1 ? (
                <ActivityCard
                  item={item}
                  key={item.ActivityId}
                  hasBtn={true}
                  hasReplay={true}
                  btnOtherLine={true}
                  btnClass="act-btn-sm"
                  className={styles['my-activity-box']}
                  btnGrous="smcard"
                  selfChange={true}
                  hasBorder={true}
                  onOpenVideoOrAudio={handleOpenVideoOrAudio}
                />
              ) : (
                <ActivitySpecialCard
                  item={item}
                  hasBtn={true}
                  btnOtherLine={true}
                  btnClass="act-btn-sm"
                  className={styles['my-activity-box']}
                  selfChange={true}
                />
              )}
            </div>
          )}
        />
      </InfiniteScroll>
    </Spin>
  )
}

export default ActivityComponent
