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

import { Col, Result, Row, Spin } from 'antd'

import { useLogin2p } from 'Login2p/Login2pContext'
import { WebNoAuthentication } from 'components/Empty'
import { MicroRoadshowService } from 'Material/MicroRoadshow.service'
import ActivityReplay from './components/ActivityReplay'
import { ActivityService } from './Activity.service'
import styles from './css/ActivityVideo.module.scss'

export interface IActivityVideo {
  videoID: number // 视频ID
}
/**活动类型列表 */
const ActivityVideo: React.FC<IActivityVideo> = props => {
  const { videoID } = props
  const login2p = useLogin2p()
  const videoRef = useRef<HTMLVideoElement>(null)

  // 视频详情
  const { data: videoData, loading: videoLoading } = useRequest(ActivityService.getActivityVideoDetail, {
    defaultParams: [videoID],
    formatResult: response => response.data.Data
  })
  // 视频播放记录
  const { run: applyVideoHistory } = useRequest(MicroRoadshowService.postVideoHistory, {
    manual: true
  })

  const subTitle = () => {
    if (videoData?.AuthInfo.HasPermission === 1) return
    return (
      <div>
        <p>若想查看可以联系对口销售</p>
        <p>申请开通对应的试用权限</p>
      </div>
    )
  }
  const handleOnplay = () => {
    videoRef.current &&
      parseInt(videoRef.current.currentTime.toString()) === 0 &&
      videoData &&
      applyVideoHistory(videoData?.VideoDetail.ActivityId || videoData?.VideoDetail.Id, videoData?.VideoDetail.Type)
  }
  return (
    <div className={styles['activity-video-page']}>
      <Row className="padding-t">
        <Col
          xs={{ span: 24, offset: 0 }}
          sm={{ span: 24, offset: 0 }}
          md={{ span: 24, offset: 0 }}
          lg={{ span: 20, offset: 2 }}
          xl={{ span: 20, offset: 2 }}
        >
          <div className="video-title">{videoData?.VideoDetail?.Title}</div>
          <Row wrap={false} gutter={24}>
            <Col flex={1}>
              {login2p.jwt ? (
                <>
                  <Spin spinning={videoLoading}>
                    <div className="act-video-wrapper">
                      {videoData ? (
                        videoData?.AuthInfo?.HasPermission === 1 ? (
                          <video
                            ref={videoRef}
                            src={videoData?.VideoDetail.ResourceUrl}
                            className="video-content"
                            controls={true}
                            controlsList="nodownload"
                            autoPlay={true}
                            loop={true}
                            preload="auto"
                            onContextMenu={e => {
                              e.preventDefault()
                              return false
                            }}
                            onPlay={handleOnplay}
                          >
                            <p> 当前浏览器不支持video标签 </p>
                          </video>
                        ) : (
                          <Result
                            status="403"
                            title="您暂无权限查看此视频~"
                            subTitle={subTitle()}
                            style={{ margin: '5% auto' }}
                          />
                        )
                      ) : null}
                    </div>
                  </Spin>
                </>
              ) : (
                <WebNoAuthentication />
              )}
            </Col>
            <Col flex={'475px'} xs={0} sm={0} md={0} lg={0} xl={24} xxl={24}>
              <ActivityReplay />
            </Col>
          </Row>
        </Col>
      </Row>
    </div>
  )
}

export default ActivityVideo
