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

const prefixCls = 'iot-number-slider-out';
const IOTNumberSlider: React.FC<IOTNumberSliderProps> = (
  {
    streamId,
    title,
    subTitle,
    streamName,
    type,
    icon,
    iconLeft,
    iconRight,
    min,
    max,
    intType='float',
    step,
    unit,
    disabled = false,
    unitdesc,
    curValue,
    startHandler = (val: any) => { },
    endHandler = (val: any) => { },
    ...rest
  }
) => {

  const [currentValue, setcurrentValue] = useState(curValue);

  useEffect(() => {
    setcurrentValue(curValue);
  }, [curValue])

  return (
    <div className={prefixCls} {...rest}>
      <div className='volume-icon-box'>
        <i className={`volume-icon volume-icon-left ${iconLeft ? iconLeft : 'insideicon-zuixiao'} `} />
      </div>

      <Slider
        min={Number.parseFloat(min)}
        max={Number.parseFloat(max)}
        step={Number.parseFloat(step)}
        showHandleBtn={false}
        curValue={currentValue+''}
        isStep={Number.parseFloat(step) === 1 &&(Math.round((Number.parseFloat(max) - Number.parseFloat(min)) / Number.parseFloat(step)) >50) }
        disabled={false}
        dotsData={dataSource(min, max, step)}
        onchange={(val: any) => {
          const item = {
            streamId,
            value: intType !== 'float'? val :val.toFixed(1),
          };
          endHandler(item);
        }}
        move={(val: any) => {
          setcurrentValue(val);
        }}
        start={() => {
        }}
      ></Slider>
      <div className='volume-icon-box'>
        <i className={`volume-icon volume-icon-right ${iconRight ? iconRight : 'insideicon-zuida'}`} />
      </div>

    </div>
  )
}

export default IOTNumberSlider;