import React, { useState, useEffect, useRef } from "react";
import { connect } from "react-redux";
import moment from 'moment'
import VideoOperationCloudControl from './videoOperationCloudControl'
import VideoOperationTalk from './videoOperationTalk'
import VideoOperationSpeed from './videoOperationSpeed'
import VideoOperationVoice from './videoOperationVoice'
import VideoOperationTime from './videoOperationTime'
import { IconPause, IconPlay } from '@douyinfe/semi-icons';
import './videoPlay.less';

const VideoOperation = ({
   operationState, operation, voiceDisY, setVoiceDisY,
   resolution, setResolution
}) => {
   const [showTimeSelect, setShowTimeSelect] = useState(false)

   const butStyle = {
      border: '1px solid #fff', display: 'inline-block', color: '#fff', padding: '0 10px',
      display: 'flex', alignItems: 'center', height: '64%', marginLeft: 12, cursor: 'pointer',
      position: 'relative'
   }

   const changeResolution = () => {
      setResolution(resolution == 'sd' ? 'hd' : 'sd')
   }

   return (
      <>
         {
            operationState ?
               operationState.control.select ?
                  <VideoOperationCloudControl /> :
                  operationState.talk.select ?
                     <VideoOperationTalk /> :
                     '' : ''
         }
         {
            showTimeSelect ?
               <VideoOperationTime close={() => { setShowTimeSelect(false) }} />
               : ''
         }
         {/* 下方操作 */}
         <div style={{
            height: 42, lineHeight: '42px', background: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%)', padding: '0 12px',
            display: 'flex', justifyContent: 'space-between',
            position: 'absolute', bottom: 0, width: '100%', zIndex: 99, color: '#fff'
         }}>
            {
               operationState ?
                  operationState.histroy.select ?
                     <>
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                           <IconPause style={{ cursor: 'pointer' }} />
                           {/* <IconPlay style={{ cursor: 'pointer' }} /> */}
                           <span style={{ marginLeft: 12 }}>{moment().format('YYYY-MM-DD HH:mm:ss')}/{moment().format('YYYY-MM-DD HH:mm:ss')}</span>
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                           <VideoOperationVoice voiceDisY={voiceDisY} setVoiceDisY={setVoiceDisY} />
                           <VideoOperationSpeed butStyle={butStyle} />
                           <div style={butStyle} onClick={() => {
                              setShowTimeSelect(!showTimeSelect)
                           }}>时间设置</div>
                        </div>
                     </>
                     :
                     <>
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                           {
                              operationState ?
                                 operation.map(p => {
                                    return <img
                                       src={`/assets/images/background/video-icon-${p.key}-${operationState[p.key].select ? 'select' : 'unselect'}.png`}
                                       height={18}
                                       style={{ marginRight: 24, cursor: 'pointer' }}
                                       onClick={p.click}
                                    />
                                 }) : ''
                           }
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                           {
                              resolution == 'sd' ?
                                 <div style={butStyle} onClick={changeResolution}>标清</div> :
                                 <div style={butStyle} onClick={changeResolution}>高清</div>
                           }
                        </div>
                     </> : ''
            }
         </div>
      </>
   )
}

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

export default connect(mapStateToProps)(VideoOperation);