import React, { useEffect, useState, useCallback } from 'react';
import { DisplayHelpInfos, DisplayTimeType, IOTTimeSliderProps } from './interface';
import { formatTime } from './utils';

import Slider from './fatSlider/fatSlider';
import NormalIcon from '../../base/normalIcon';
import {dataSource} from "../sliderConfig";
import './style/index.less';



const prefixCls = 'iot-time-slider-out';
const IOTTimeSlider: React.FC<IOTTimeSliderProps> = ({
  streamId,
  streamName,
  title,
  subTitle,
  icon,
  min,
  max,
  step,
  timeConver,
  disabled = false,
  unit = 'min',
  unitdesc,
  curValue,
  leftIcon,
  rightIcon,
  startHandler = (val: any) => { },
  endHandler = (val: any) => { },
  ...rest
}) => {
  const [displayValue, setDisplayValue] = useState<string>('');
  // const [displayHelpInfos, setDisplayHelpInfos] = useState<DisplayHelpInfos>({ minVal: Number(min), maxVal: Number(max), stepVal: Number(step), initValue: curValue, displayTimeType: 'mm:ss' });

  // useEffect(() => {
  //   const { hoursFlag, minutesFlag, secondsFlag } = timeConver;
  //   const _max = Number.parseInt(max);
  //   const _min = Number.parseInt(min);
  //   const _step = Number.parseInt(step);
  //   const _curValue = curValue;
  //   const _displayHelpInfos: DisplayHelpInfos = { minVal: _min, maxVal: _max, stepVal: _step, initValue: _curValue, displayTimeType: 'mm:ss' };
  //   // 展示精确到秒
  //   if (secondsFlag) {
  //     // 默认单位是分钟
  //     if (unit === 'min') {
  //       _displayHelpInfos.maxVal = _displayHelpInfos.maxVal * 60;
  //       _displayHelpInfos.minVal = _displayHelpInfos.minVal * 60;
  //       _displayHelpInfos.stepVal = _displayHelpInfos.stepVal * 60;
  //       _displayHelpInfos.initValue = _displayHelpInfos.initValue * 60;
  //     }
  //     // 默认单位是小时
  //     if (unit === 'h') {
  //       _displayHelpInfos.maxVal = _displayHelpInfos.maxVal * 60 * 60;
  //       _displayHelpInfos.minVal = _displayHelpInfos.minVal * 60 * 60;
  //       _displayHelpInfos.stepVal = _displayHelpInfos.stepVal * 60 * 60;
  //       _displayHelpInfos.initValue = _displayHelpInfos.initValue * 60 * 60;
  //     }
  //     // 展示格式设置
  //     if (minutesFlag) {
  //       // 展示为 时：分：秒格式
  //       if (hoursFlag) {
  //         _displayHelpInfos.displayTimeType = 'hh:mm:ss';

  //         // 展示为 分：秒格式
  //       } else {
  //         _displayHelpInfos.displayTimeType = 'mm:ss';
  //       }
  //     } else {
  //       _displayHelpInfos.displayTimeType = 'ss';
  //     }
  //     // 展示精确到分钟
  //   } else if (minutesFlag) {
  //     // 默认单位是小时
  //     if (unit === 'h') {
  //       _displayHelpInfos.maxVal = _displayHelpInfos.maxVal * 60;
  //       _displayHelpInfos.minVal = _displayHelpInfos.minVal * 60;
  //       _displayHelpInfos.stepVal = _displayHelpInfos.stepVal * 60;
  //       _displayHelpInfos.initValue = _displayHelpInfos.initValue * 60;
  //     }
  //     // 默认单位是秒
  //     if (unit === 's') {
  //       _displayHelpInfos.maxVal = _displayHelpInfos.maxVal / 60;
  //       _displayHelpInfos.minVal = _displayHelpInfos.minVal / 60;
  //       _displayHelpInfos.stepVal = _displayHelpInfos.stepVal / 60;
  //       _displayHelpInfos.initValue = _displayHelpInfos.initValue / 60;

  //     }
  //     // 展示格式设置
  //     // 展示为 时：分格式
  //     if (hoursFlag) {
  //       _displayHelpInfos.displayTimeType = 'hh:mm';
  //     } else {
  //       _displayHelpInfos.displayTimeType = 'mm';
  //     }
  //     // 展示精确到小时
  //   } else if (hoursFlag) {
  //     // 默认单位是分钟
  //     if (unit === 'min') {
  //       _displayHelpInfos.maxVal = _displayHelpInfos.maxVal / 60;
  //       _displayHelpInfos.minVal = _displayHelpInfos.minVal / 60;
  //       _displayHelpInfos.stepVal = _displayHelpInfos.stepVal / 60;
  //       _displayHelpInfos.initValue = _displayHelpInfos.initValue / 60;

  //     }
  //     // 默认单位是秒
  //     if (unit === 's') {
  //       _displayHelpInfos.maxVal = _displayHelpInfos.maxVal / (60 * 60);
  //       _displayHelpInfos.minVal = _displayHelpInfos.minVal / (60 * 60);
  //       _displayHelpInfos.stepVal = _displayHelpInfos.stepVal / (60 * 60);
  //       _displayHelpInfos.initValue = _displayHelpInfos.initValue / (60 * 60);
  //     }
  //     _displayHelpInfos.displayTimeType = 'hh';
  //   }
  //   setDisplayHelpInfos({ ..._displayHelpInfos });
  // }, [timeConver, step, max, min, curValue, unit]);



  const onChange = (val: any) => {
    const value = formatTime(val, unit, timeConver);
    setDisplayValue(value);
  };
  useEffect(() => {
    const value = formatTime(Number.parseInt(curValue), unit, timeConver);
    setDisplayValue(value);

  }, [curValue, timeConver])

  return (
    <div className={prefixCls} {...rest}>
      <div className='iot-time-slider'>
        <div className='iot-time-slider-top'>
          <div className='iot-time-slider-left'>
            {
              icon?.show && (
                <div className="iot-time-slider-icon">
                  <span className={['iot-time-slider-icon-image', icon?.value ? icon.value : 'insideicon-cu-1'].join(' ')}></span>
                </div>
              )
            }
            <div className="iot-time-slider-title" style={{ marginLeft: icon?.show ? '0' : '.2rem' }} >
              <div className="iot-time-slider-main" >{title}</div>
            </div>
            <div className='line'></div>
            <div className="value-unit" style={{minWidth:'.64rem'}}> {displayValue}
            {timeConver.descText}</div>
          </div>
        </div>
        <div className="iot-time-slider-number">
          <Slider
            min={Number.parseInt(min)}
            max={Number.parseInt(max)}
            step={1}
            showHandleBtn={false}
            // isStep={Number.parseFloat(step) === 1 &&(Math.round((Number.parseFloat(max) - Number.parseFloat(min)) / Number.parseFloat(step)) >50) }
            curValue={Number.parseInt(`${curValue}`)}
            dotsData={dataSource(min, max, step)}
            disabled={false}
            onchange={(val: any) => {
              const item = {
                streamId,
                value: val,
              };
              endHandler(item);
            }}
            move={(val: any) => {
              onChange(val);
            }}
            start={() => {
              startHandler('start');
            }}
          ></Slider>
        </div>
        <div className="disabled-pangle" style={{ display: `${disabled ? 'block' : 'none'}` }}></div>
      </div>
    </div>
  );
};

export default IOTTimeSlider;