import React, { useEffect, useState } from 'react';
import { IOTSliderProps } from './interface';
import Slider from './Slider/Slider';
import { dataSource } from "../sliderConfig";

import './style/index.less';
import { typeConversion } from "../../base/utils";
import NormalIcon from '../../base/normalIcon';

const prefixCls = 'iot-slider-out';

const IOTSlider: React.FC<IOTSliderProps> = ({
  streamId,
  title,
  subTitle,
  streamName,
  type,
  icon,
  min,
  max,
  intType='float',
  step,
  unit,
  disabled = false,
  unitdesc,
  curValue,
  startHandler = (val: any) => { },
  endHandler = (val: any) => { },
  ...rest
}) => {
  const [currentValue, setcurrentValue] = useState(curValue);
  const onChange = (value: any) => {
    setcurrentValue(value);
    // console.log(value);
  };
  useEffect(() => {
    setcurrentValue(typeConversion(type, curValue));
  }, [curValue, type])


  return (
    <div className={prefixCls} {...rest}>
      <div className="iot-slider">
        <div className="iot-slider-top">
          <div className="iot-slider-left">
            {icon?.show && (
              <div className="iot-slider-icon">
                <span
                  className={[
                    'iot-slider-icon-image',
                    icon?.value ? icon.value : 'insideicon-cu-1',
                  ].join(' ')}
                ></span>
              </div>
            )}
            <div className="iot-slider-title" style={{ marginLeft: icon?.show ? '0' : '.2rem' }}>
              <div className="iot-slider-main">{title}</div>
            </div>
            <div className="line"></div>
            <div className="value-unit" style={{minWidth:'.64rem'}}>
              {  intType !== 'float' ?currentValue:Number.parseFloat(currentValue).toFixed(1)}
              {unit}
            </div>
          </div>
        </div>

        <div className="iot-slider-number">
          <Slider
            defaultMin={min}
            defaultMax={max}
            min={Number.parseFloat(min)}
            max={Number.parseFloat(max)}
            step={Number.parseFloat(step)}
            isStep={Number.parseFloat(step) === 1 && (Math.round((Number.parseFloat(max) - Number.parseFloat(min)) / Number.parseFloat(step)) > 50)}
            showHandleBtn={false}
            curValue={`${currentValue}`}
            dotsData={dataSource(min, max, step)}
            disabled={false}
            onchange={(val: any) => {
              const item = {
                streamId,
                value: intType !== 'float' ?val:val.toFixed(1),
              };
              endHandler(item);
              setcurrentValue(val);
            }}
            move={(val: any) => {
              // console.log(val);
              setcurrentValue(val);
            }}
            start={() => {
              startHandler('start');
            }}
          ></Slider>
        </div>
        <div
          className="disabled-pangle"
          style={{ display: `${disabled ? 'block' : 'none'}` }}
        ></div>
      </div>
    </div>
  );
};

export default IOTSlider;