import React from 'react'
import { message } from 'antd';
import IconFont from '../../../themeComponents/IconFont'
import RangePickerFilter from '../../../components/RangePicker'

import QueueAnim from "rc-queue-anim";

const MAX_DOWNLOAD_GAP = 7;

export default function TimePick({ onClose, visible, onChange, download,value, onOk, timePickType,getContainer }) {
  const handleChange = (options) => {
    if(!options || options.length<1) return onChange([])
    const [startTime, endTime] = options ;
    if ((timePickType === 'cloudDownload' || timePickType === 'frontDownload') && (endTime * 1 - startTime * 1 > 1000 * 3600 * 24 * MAX_DOWNLOAD_GAP)) {
      return message.error(`最大下载时间不能超过${MAX_DOWNLOAD_GAP}天`);
    }
    onChange(options)
  }
  return (
    <QueueAnim type="top">
      {visible ? (
        <div className="pick-history-timer-layout" key="time-pick" onClick={(e)=>{e.stopPropagation()}}>
          <div className="pick-history-timer">
            <IconFont type="icon-S_Edit_LineClose" className="close-pick-btn" onClick={onClose} title="关闭" />
            <RangePickerFilter onChange={handleChange} showTime download={download} className="pick-timer-box" value={value} getContainer={getContainer}/>
            <div className="timer-tools">
              <span className="tools-item" onClick={onClose}>
                取消
              </span>
              <span className="tools-item" onClick={onOk}>
                确认
              </span>
            </div>
          </div>
        </div>
      ) : null}
    </QueueAnim>
  )
}
