import React, { useEffect, useState, useCallback } from 'react';
import { IOTNoPoleSliderProps } from './interface';
import Slider from './fatSlider/fatSlider';
import { dataSource } from "../sliderConfig";
import './style/index.less';



const prefixCls = 'iot-nopole-slider-out';
const IOTNoPoleSlider: React.FC<IOTNoPoleSliderProps> = ({
  streamId,
  streamName,
  title,
  subTitle,
  icon,
  min,
  max,
  intType='float',
  step,
  disabled = false,
  unit,
  unitdesc,
  curValue,
  leftIcon,
  rightIcon,
  startHandler = (val: any) => { },
  endHandler = (val: any) => { },
  ...rest
}) => {
  const [displayValue, setDisplayValue] = useState<string>('');

  useEffect(() => {
    setDisplayValue(curValue);

  }, [curValue])

  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'}}>{intType !== 'float' ?displayValue:Number.parseFloat(displayValue).toFixed(1)}{unit}</div>
          </div>
        </div>
        <div className="iot-time-slider-number">
          <div className='min-text'>{min}</div>
          <Slider
            min={Number.parseFloat(min)}
            max={Number.parseFloat(max)}
            step={Number.parseFloat(step)}
            showHandleBtn={false}
            isStep={Number.parseFloat(step) === 1 &&(Math.round((Number.parseFloat(max) - Number.parseFloat(min)) / Number.parseFloat(step)) >50) }
            curValue={Number.parseFloat(displayValue)}
            dotsData={dataSource(min, max, step)}
            disabled={false}
            onchange={(val: any) => {
              const item = {
                streamId,
                value: intType !== 'float' ?val:val.toFixed(1),
              };
              endHandler(item);
            }}
            move={(val: any) => {
              setDisplayValue(val);
            }}
            start={() => {
              startHandler('start');
            }}
          ></Slider>
          <div className='max-text'>{max}</div>
        </div>
        <div className="disabled-pangle" style={{ display: `${disabled ? 'block' : 'none'}` }}></div>
      </div>
    </div>
  );
};

export default IOTNoPoleSlider;