import React, { useEffect, useState } from 'react'
import { useHistory } from 'react-router-dom'
import useRequest from '@ahooksjs/use-request/es'

import { List, Modal, Spin } from 'antd'
import { DoubleRightOutlined } from '@ant-design/icons'

import { INewPermissionType } from 'Material/components/NoPermission'
import ActivityCard from './ActivityCard'
import {
  ActivityService,
  IActivitySpecialListItem,
  IActivityTypeListItem,
  IAudioDetail
} from 'Activity/Activity.service'
import AudioFix from './AudioFix'
import { INewestItem } from 'Newest/Newest.service'
import { IMyActivityItem } from 'Personal/Personal.service'
import { useLogin2p } from 'Login2p/Login2pContext'
import styles from '../css/ActivityReplay.module.scss'

export interface IActivityReplay {
  replayItem?: IActivityTypeListItem | IActivitySpecialListItem // 处理播放音频的（其他组件需要播放的音频）
  resetReplay?: () => void // 重置音频
}

const ActivityReplay: React.FC<IActivityReplay> = ({ replayItem, resetReplay }) => {
  // const { actType, filterItem } = props
  const history = useHistory()
  const login2p = useLogin2p()
  const [audioVisible, setAudioVisible] = useState<boolean>(false)
  const [audioItem, setAudioItem] = useState<IAudioDetail>()
  useEffect(() => {
    replayItem && handleOpenVideoOrAudio(replayItem as IActivityTypeListItem)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [replayItem])

  // 回放的活动列表
  const { data, loading: activityReplayListLoading } = useRequest(ActivityService.getActivityTypeList, {
    defaultParams: [{ PageSize: 5, CurrentIndex: 1, PlayBack: 1, ActiveState: '3' }],
    formatResult: response => response.data?.Data?.List
  })
  const handleToReplayList = () => {
    history.push(`/activity/playback/0${login2p.inviteCode ? '?invite_code=' + login2p.inviteCode : ''}`)
  }
  const handleCloseAudio = () => {
    setAudioVisible(false)
  }
  const handleOpenVideoOrAudio = (item: IActivityTypeListItem | INewestItem | IMyActivityItem) => {
    resetReplay && resetReplay()
    if (item?.AuthInfo && 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)
  }
  return (
    <Spin spinning={activityReplayListLoading}>
      <AudioFix audioDetail={audioItem as IAudioDetail} visible={audioVisible} onClose={handleCloseAudio} />
      <div className={styles['activity-replay-wrapper']}>
        <div className="act-replay-title-line g-flex g-flex-between g-flex-v-center">
          <div className="act-replay-title com-fz16 com-fw-bold">活动回放</div>
          <div className="act-showmore" onClick={handleToReplayList}>
            <span>查看全部</span>
            <DoubleRightOutlined className="more-icon" />
          </div>
        </div>
        <div className="act-wrapper">
          <List
            dataSource={data || []}
            renderItem={item => (
              <ActivityCard
                item={item}
                key={item.ActivityId}
                hasReplay={true}
                hasBorder={true}
                onOpenVideoOrAudio={handleOpenVideoOrAudio}
              />
            )}
          />
        </div>
      </div>
    </Spin>
  )
}

export default ActivityReplay
