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

import { useMedia } from 'Context/Media/MediaContext'
import { useLogin2p } from 'Login2p/Login2pContext'
import MasonryContainer from 'Material/components/Masonry.component'
import { IItemType } from '../../Material/components/Item.component'
import AudioFix from 'Activity/components/AudioFix'
import { INewestList, NewestService } from 'Newest/Newest.service'
import { IAudioDetail } from 'Activity/Activity.service'

const pageSize = 20
interface ISearchAllProps {
  keyword: string
}
/**
 * 搜索-综合
 */
const SearchAll: React.FC<ISearchAllProps> = props => {
  const { keyword } = props

  const media = useMedia()
  const login2p = useLogin2p()
  const _pageSize = login2p.jwt ? pageSize : media.isMaxWrap ? 3 : 5
  const [data, setData] = useState<INewestList[]>([])
  const [hasMore, setHasMore] = useState<boolean>(true)
  const [page, setPage] = useState<number>(1) // 当前页
  const [audioItem, setAudioItem] = useState<IAudioDetail>()
  const [audioVisible, setAudioVisible] = useState<boolean>(false)

  useEffect(() => {
    resetSomeData()
    getSearchList({ PageSize: _pageSize, CurrentIndex: 1, KeyWord: keyword })
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [keyword])

  // 拉取数据
  const { loading: dataLoading, run: getSearchList } = useRequest(NewestService.getNewestList, {
    manual: true,
    onSuccess: res => {
      setData(login2p.jwt ? [...data, ...res.data.Data?.List] : res.data.Data?.List.slice(0, _pageSize))
      setHasMore(res.data.Data ? !res.data.Data?.Paging?.IsEnd : false)
    }
  })

  const resetSomeData = () => {
    setHasMore(true)
    setPage(1)
    setData([])
  }

  const handleLoadMoreData = () => {
    if (!login2p.jwt || dataLoading || !hasMore) return
    setPage(page + 1)
    getSearchList({ PageSize: _pageSize, CurrentIndex: page + 1, KeyWord: keyword })
  }
  const handleOnClick = (item: INewestList) => {
    // 音频播放
    if (item.Source === IItemType.Activityvoice && item.Activityvoice) {
      setAudioItem({
        ActivityId: item.Activityvideo.ActivityId,
        Name: item.Activityvoice.Title,
        Url: item.Activityvoice.ResourceUrl,
        Type: item.Activityvoice.Type,
        SourceId: item.Activityvoice.SourceId
      })
      setAudioVisible(true)
    }
    if (item.Source === IItemType.AskserieVideo && item.AskserieVideo) {
      setAudioItem({
        ActivityId: item.SourceId,
        Name: item.AskserieVideo.Title,
        Url: item.AskserieVideo.ResourceUrl,
        Type: item.AskserieVideo.Type
      })
      setAudioVisible(true)
      return
    }
  }
  const handleCloseAudio = () => {
    setAudioVisible(false)
  }

  return (
    <>
      <AudioFix audioDetail={audioItem as IAudioDetail} visible={audioVisible} onClose={handleCloseAudio} />
      <MasonryContainer
        loadMore={handleLoadMoreData}
        hasMore={hasMore}
        loading={dataLoading}
        dataSource={data || []}
        itemType={IItemType.NormalChart}
        onItemClick={handleOnClick}
      />
    </>
  )
}

export default SearchAll
