import React, { useRef, useEffect, useState } from 'react'
import moment from 'moment'
import './textScroll.less'

function TextScroll (props) {
   const { content, duration } = props
   const [showContent, setShowContent] = useState('1231231')

   useEffect(() => {
      let repeatTime = moment()
      let refreshTime = moment()
      const scroll = () => {
         let contentParent = document.getElementById('marquee_box')
         document.getElementById('contentPMakeUp').style.width = contentParent.clientWidth + 'px'
         // 控制频率
         if (moment().diff(refreshTime) > 1000 / 60) {
            const contentP = document.getElementById('contentP')
            // 静态等待时间
            if (moment().diff(repeatTime) > 1000 * 1.5) {
               contentP.style.visibility = 'visible'
            }
            if (moment().diff(repeatTime) > 1000 * 3) {
               contentParent.scrollLeft = contentParent.scrollLeft + 1
            }
            if (contentParent.scrollLeft >= contentP.clientWidth + 24) {
               contentParent.scrollLeft = 0
               repeatTime = moment()
               setShowContent('asdasd' + Math.random())
               contentP.style.visibility = 'hidden'
            }
            refreshTime = moment()
         }
         window.requestAnimationFrame(scroll)
      }
      window.requestAnimationFrame(scroll)
   }, [])

   return (
      <div className="marquee_box" id='marquee_box' style={{ overflow: 'hidden' }} >
         <p style={{ position: 'relative', left: 24 }}>
            <p id='contentP' style={{ display: 'inline-block', visibility: 'hidden' }}>{showContent}</p>
            <p id='contentPMakeUp' style={{ width: 0, display: 'inline-block' }}></p>
         </p>
      </div>
   )
}

export default React.memo(TextScroll)
