import React, { useEffect, useState } from 'react';
import { IOTCordEntryNumberProps } from './interface';
import IOTBottomSlide from '../../common/IOTBottomSlide/index'
import IOTNumberSlider from './IOTNumberSlider/index';
import {dataSource} from "../sliderConfig";

import './style/index.less';
import { typeConversion } from '../../base/utils';
const prefixCls = 'iot-cord-entry-number-out';

const IOTCordEntryNumber: React.FC<IOTCordEntryNumberProps> = ({
  title,
  streamId,
  type,
  streamName,
  curValue,
  subTitle,
  unit,
  icon,
  min,
  intType = 'float',
  max,
  step,
  disabled = false,
  handler,
  startHandler = (val: any) => { },
  endHandler = (val: any) => { },
  unitdesc,
  ...rest
}) => {
  const [currentValue, setcurrentValue] = useState(0);
  const [btmSlider, setBtmSlider] = useState(false);
  const [tempValue, setTempValue] = useState(Number(curValue));
  const onChange = (value: any) => {
    setcurrentValue(value);
    // console.log(value);
  };
  const [btmBarType, setBtmBarType] = useState('com'); // com // show

  useEffect(() => {
    if (!btmSlider) {
      setcurrentValue(Number.parseFloat(typeConversion(type, curValue)));
    }
  }, [curValue, btmSlider]);
  return (
    <>
      <div className={prefixCls} {...rest}>
        <div className='iot-cord-entry-number'>
          <div className='cord-entry-number-left'>
            {
              icon?.show && (
                <div className="cord-entry-number-icon">
                  <span className={['cord-entry-number-icon-image', icon?.value ? icon.value : 'insideicon-cu-1'].join(' ')}></span>
                </div>
              )
            }
            <div className="cord-entry-number-title" style={{ marginLeft: icon?.show ? '0' : '.2rem' }} >
              <div className="cord-entry-number-main" >{title}</div>
              {
                subTitle?.show && (
                  <div className="cord-entry-number-sub">{subTitle['value']}</div>
                )
              }
            </div>
          </div>
          <div className="cord-entry-number-right" onClick={() => {

          }}>
            <div className='number-show' onClick={() => {
              setBtmSlider(true);
            }}>
              <div className='cord-entry-number-text'>{curValue}{unit}</div><div className='arrow insideicon-entry'></div>

            </div>
          </div>
          {disabled && (
            <div className="cord-entry-number-disable"></div>
          )}
        </div>
      </div>
      <IOTBottomSlide
        type={btmBarType}
        isShow={btmSlider}
        confirmHandler={(val: any) => {
          // console.log(val);
          if(val){
            const item = {
              streamId,
              value: intType !== 'float' ? tempValue : tempValue.toFixed(1),
            };
            handler && handler(item);
          }else{
            setTempValue(Number(curValue));
          }
          setBtmSlider(false);
        }}
        leftText='取消' rightText='确定' title={title}>
        <IOTNumberSlider
          min={Number.parseFloat(min)}
          max={Number.parseFloat(max)}
          step={Number.parseFloat(step)}
          unit={unit}
          intType={intType}
          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) => {
            setTempValue(val);
            // // console.log(val);
            // const item = {
            //   streamId,
            //   value: intType !== 'float' ? val : val.toFixed(1),
            // };
            // handler && handler(item);
          }}
          move={(val: any) => {
            // console.log(val);
            // setcurrentValue(val);
          }}
          start={() => {
            // startHandler('start');
          }}
        /
        >

      </IOTBottomSlide>
    </>
  );
};

export default IOTCordEntryNumber;