import React, { useState, useEffect, useCallback,useMemo  } from 'react';
import moment from 'moment';
import { DatePicker } from 'antd';
import Title from '../Title';
import IconFont from '../../themeComponents/IconFont';
import { LMConfig } from '@zenview/micro-basic-library';
import './index.less';

function RangePicker({ className = '', title, icon, download,onChange, value, showTime, format = 'YYYY.MM.DD HH:mm:ss', dropdownClassName, showFastSet, defaultDay,getContainer }) {
  const [_value, setValue] = useState(value);
  const rangesarr=useMemo(()=>{
    if(download){
      return {
        '3天': [moment(new Date()).subtract(3, 'd'), moment()],
        '7天': [moment(new Date()).subtract(7, 'd'), moment()],
      }
    }else{
      return {
        '3天': [moment(new Date()).subtract(3, 'd'), moment()],
        '7天': [moment(new Date()).subtract(7, 'd'), moment()],
        '15天': [moment(new Date()).subtract(15, 'd'), moment()],
      }
    }
  },[download])
  useEffect(() => setValue(value), [value]);
  const fastSetTime = useCallback(
    (type) => {
      const dates = [moment().subtract(type, 'day'), moment()];
      setValue(() => dates);
      onChange(dates);
    },
    [onChange]
  );
  const onPickChange = useCallback(
    (dates) => {
      onChange && onChange(dates);
      setValue(dates);
    },
    [onChange]
  );

  return (
    <div className={`lm-filter-range-picker-wrapper ${className}`}>
      {title && (
        <Title icon={icon} title={title} className="">
          {Array.isArray(_value) && !_value[0] && !_value[1] && title && (
            <div style={{ fontSize: 12, color: 'var(--text-light)' }}>
              <IconFont type="icon-S_Photo_AlarmOpen" style={{ paddingRight: 4, fontSize: 14 }} />
              默认查询近{defaultDay || LMConfig.BSConfig.dataRetention}天
            </div>
          )}
        </Title>
      )}
      {showFastSet && (
        <div className="fast-set-wrapper">
          <span onClick={() => fastSetTime(1)}>近一天</span>
          <span onClick={() => fastSetTime(3)}>近三天</span>
          <span onClick={() => fastSetTime(7)}>近七天</span>
          <span onClick={() => fastSetTime(30)}>近一月</span>
        </div>
      )}
      <DatePicker.RangePicker
        showTime={showTime}
        format={format}
        value={_value}
        dropdownClassName={`lm-range-picke-drop ${dropdownClassName}`}
        onChange={onPickChange}
        getPopupContainer={()=> { return (getContainer && getContainer()) || document.body}}
        ranges={rangesarr}
      />
    </div>
  );
}

export default RangePicker;
