import React, { useEffect, useState, useRef } from 'react'
import { PlayCircleOutlined, PauseCircleOutlined } from '@ant-design/icons';
import {Slider} from 'antd';
import './index.less'


const Page = ({ data, setClock }) => {
  const [player,setPlayer] = useState(false)
  const [index,setIndex] = useState(0)
  const marks = {
    [0]: {
      style: { color: '#333' },
      label: <span style={{width: "130px", fontSize: "12px", display:'inline-block', marginTop:'3px'}}>{data?.[0]?.tm2||''}</span>,
    },
    [data.length - 1]: {
      style: { color: '#333' },
      label: <div style={{width: "130px", fontSize: "12px", display:'inline-block', marginTop:'3px', marginLeft: "-32px"}}>{data?.[data?.length-1]?.tm2||""}</div>,
    }
  };


  useEffect(()=>{
    setIndex(0)
    setPlayer(false)
  },[data])


  useEffect(() => {
    if (player) {
      let num = index;
      const h = setInterval(() => {
        num = num + 1;
        if (num >= data.length) {
          num = 0;
        }
        setIndex(num);
      }, 1100);

      return () => {
        clearInterval(h);
      }
    }
  }, [player, index]);


  useEffect(()=>{
    if(index!==null){
      setClock(index)
    }
  },[index])


  return (
    <>
      {
        data.length>0?
        <div className='SliderPlayerBox'>
          <div className='SliderPlayerBox_playbtn' onClick={()=>setPlayer(!player)}>
            { player?<PauseCircleOutlined style={{color: "#007AFF", fontSize: "25px"}}/>:<PlayCircleOutlined style={{color: "#007AFF", fontSize: "25px"}}/> }
          </div>
          <div className='SliderPlayerBox_slider'>
            <Slider 
              disabled={player}
              min={0}
              max={data.length-1}
              value={index}
              marks={marks}
              tooltip={{ 
                open:true,
                formatter:(value) => data[value].tm2
               }} 
              onChange={(val) => setIndex(val)}
            />
          </div>
        </div>:null
      }
    </>
  )
}

export default Page