import React, { useState, useEffect, useRef } from "react";
import { connect } from "react-redux";
import moment from 'moment'
import { Col, Row, } from "@douyinfe/semi-ui";
import { IconReply } from '@douyinfe/semi-icons';
import TextScroll from '../textScroll'
import './videoPlay.less';

const timeFormat = 'YYYY-MM-DD HH:mm:ss'

const VideoHeader = ({ operationState, changeSelectState, setProcessDisX, name, showTime, histroyTime,content }) => {
   const time = useRef(moment(showTime || undefined))
   const upTimeInterval = useRef(null)
   const [showTime_, setShowTime] = useState('     ')

   const updateTime = () => {
      if (!showTime) {
         setShowTime('')
         clearInterval(upTimeInterval.current)
         return 
      }
      time.current = moment(showTime || undefined)
      if (upTimeInterval.current) {
         clearInterval(upTimeInterval.current)
      }
      const upTime = () => {
         time.current.add(1, 's')
         if (operationState && operationState.histroy.select) {
            // setProcessDisX(Math.random() * 300 + 100)
            if (time.current.isSameOrAfter(histroyTime[1])) {
               clearInterval(upTimeInterval.current)
            }
            setProcessDisX(
               time.current.diff(moment(histroyTime[0]), 'seconds') / moment(histroyTime[1]).diff(moment(histroyTime[0]), 'seconds') * document.getElementById('process_point').parentElement.offsetWidth
            )
         }
         setShowTime(time.current.format(timeFormat))
      }
      upTime()
      upTimeInterval.current = setInterval(upTime, 1000)
   }

   useEffect(() => {
      updateTime()
      return () => {
         if (upTimeInterval.current) {
            clearInterval(upTimeInterval.current)
         }
      }
   }, [])

   useEffect(() => {
      updateTime()
   }, [showTime])

   return (
      <div style={{
         height: 42, lineHeight: '42px', background: '#00000026',
         position: 'absolute', width: '100%', zIndex: 99,
         color: '#fff'
      }}>
         <Row>
            <Col span={9} style={{
               backgroundImage: 'url(/assets/images/background/videoPlayBg.png)',
               backgroundSize: '100% 100%',
               backgroundRepeat: 'no-repeat',
               padding: '0 12px'
            }}>
               {
                  operationState && operationState.histroy.select ?
                     <>
                        <IconReply style={{ marginRight: 12, cursor: 'pointer' }} onClick={() => {
                           changeSelectState('histroy')
                        }} />
                     </> : ''
               }
               {showTime_} {name}
            </Col>
            <Col span={15} style={{}}>
               <div style={{ paddingRight: 12 }}>
                  <TextScroll content={[]} duration={6} />
               </div>
            </Col>
         </Row>
      </div>
   )
}

function mapStateToProps (state) {
   const { auth } = state;
   return {
      user: auth.user,
   };
}

export default connect(mapStateToProps)(VideoHeader);