import React, { useState, useEffect, useRef } from "react";
import { connect } from "react-redux";
import { DatePicker, Toast, ToastFactory, Space } from '@douyinfe/semi-ui';
import './videoPlay.less';
import moment from "moment";

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

const VideoOperationHistroyTime = ({ close, histroyTime, setHistroyTime, setProcessDisX }) => {
   const [selectedTimeRange, setSelectedTimeRange] = useState(histroyTime)

   useEffect(() => {
      if (!selectedTimeRange.length) {
         setSelectedTimeRange([moment().subtract(72, 'hours').format(timeFormat), moment().format(timeFormat)])
      }
   }, [])

   const ToastInCustomContainer = ToastFactory.create({
      getPopupContainer: () => document.getElementById('vcmp_videoplay'),
   });

   return (
      <div style={{
         position: 'absolute', top: 'calc(50% - 90px)', left: 'calc(50% - 260px)',
         width: 520, height: 180, backgroundColor: '#000000A5', padding: '40px 30px',
         display: 'flex', flexDirection: 'column', justifyContent: 'space-between'
      }}>
         <div style={{ display: 'flex', justifyContent: 'center' }}>
            <DatePicker
               density='compact'
               type="dateTimeRange"
               value={selectedTimeRange}
               onChange={(t, timeRange) => {
                  setSelectedTimeRange(timeRange)
               }}
               style={{ width: '100%' }}
            // disabledDate={(date, options) => {
            //    const { rangeStart, rangeEnd } = options;
            //    // console.log(date, options);
            //    if (!rangeStart && !rangeEnd) {
            //       return false
            //    }
            //    if (rangeStart) {
            //       return Math.abs(moment(date).diff(moment(rangeStart), 'days')) > 3
            //    }
            //    if (rangeEnd) {
            //       return Math.abs(moment(date).diff(moment(rangeEnd), 'days')) > 3
            //    }
            // }}
            // disabledTime={(date, type) => {
            //    console.log(date, type);
            // }}
            />
         </div>
         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', }}>
            <span style={{ color: '#FF7100' }}>
               <img src="/assets/images/background/warning.png" height={14} style={{ position: 'relative', top: 2, marginRight: 2 }} />
               最长时间跨度不超过72小时
            </span>
            <span>
               <Space>
                  <div
                     onClick={() => {
                        close()
                     }}
                     style={{
                        cursor: 'pointer', height: 32, width: 56, lineHeight: '32px', borderRadius: 2,
                        textAlign: 'center', background: '#fff', color: 'rgba(0, 0, 0, 0.65)'
                     }}
                  >取消</div>
                  <div
                     onClick={() => {
                        if (selectedTimeRange.length == 2 && selectedTimeRange.every(t => t)) {
                           if (Math.abs(moment(selectedTimeRange[0]).diff(moment(selectedTimeRange[1]), 'hours')) > 72) {
                              ToastInCustomContainer.destroyAll()
                              return ToastInCustomContainer.error('所选时间超过 72 小时')
                           }
                           setHistroyTime(selectedTimeRange)
                           setProcessDisX(0)
                           close()
                        }
                     }}
                     style={{
                        cursor: 'pointer', height: 32, width: 56, lineHeight: '32px', borderRadius: 2,
                        textAlign: 'center', background: '#1859C1', color: '#fff'
                     }}
                  >播放</div>
               </Space>
            </span>
         </div>
      </div>
   )
}

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

export default connect(mapStateToProps)(VideoOperationHistroyTime);