import React, { useEffect, useState } from 'react';
import t, { string } from 'prop-types';
import { IOTIconSliderProps } from './interface';

import './style/index.less';
const prefixCls = 'iot-icon-slider-out';
import Slider from '../IOTSlider/Slider/Slider';
import { typeConversion } from "../../base/utils";
import {dataSource} from "../sliderConfig";
import NormalIcon from '../../base/normalIcon';

const IOTIconSlider: React.FC<IOTIconSliderProps> = ({
  streamId,
  title,
  streamName,
  subTitle,
  type,
  icon,
  min,
  max,
  intType = 'float',
  step,
  unit,
  disabled = false,
  unitdesc,
  curValue,
  leftIcon,
  rightIcon,
  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])
  return (
    <div className={prefixCls} {...rest}>
      <div className="iot-icon-slider">
        <div className="iot-icon-slider-top">
          <div className="iot-icon-slider-left">
            {icon?.show && (
              <div className="iot-icon-slider-icon">
                <span
                  className={[
                    'iot-icon-slider-icon-image',
                    icon?.value ? icon.value : 'insideicon-cu-1',
                  ].join(' ')}
                ></span>
              </div>
            )}
            <div
              className="iot-icon-slider-title"
              style={{ marginLeft: icon?.show ? '0' : '.2rem' }}
            >
              <div className="iot-icon-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-icon-slider-number">
          <Slider
            min={Number.parseFloat(min)}
            max={Number.parseFloat(max)}
            step={Number.parseFloat(step)}
            showHandleBtn={true}
            defaultMin={min}
            defaultMax={max}
            curValue={currentValue+''}
            disabled={false}
            // ===1 && 差值/步长 >50 无极 否则 有极
            isStep={Number.parseFloat(step) === 1 &&(Math.round((Number.parseFloat(max) - Number.parseFloat(min)) / Number.parseFloat(step)) >50) }
            dotsData={dataSource(min,max,step)}
            onchange={(val: any) => {
              // // console.log(val);
              const item = {
                streamId,
                value: intType !== 'float' ? val : val.toFixed(1),
              };
              setcurrentValue(val);
              endHandler(item);
            }}
            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 IOTIconSlider;