import React, { useEffect, useState, useCallback } from 'react';
import Slider from './poleSlider';
import { IOTPoleSliderProps,Iitem,specialObjProps } from "./interface";
import './style/index.less';

const prefixCls = 'iot-pole-slider-out';

const returnText = (items: Iitem[], curValue: string) => {
  let values: string = '';
  items.map((item: Iitem) => {
    if (item.value === curValue) {
      values = item.text
    }
  })
  return values;
}

const IOTPoleSlider: React.FC<IOTPoleSliderProps> = ({
  streamId,
  title,
  streamName,
  subTitle,
  type,
  icon,
  showIconFont,
  disabled = false,
  curValue,
  specialObj,
  items,
  styleType,
  startHandler = (val: any) => { },
  endHandler = (val: any) => { },
  handler = (val: any) => { },
  ...rest
}) => {
  const [dataSource, setDataSource] = useState<Iitem[]>(items);
  const [currentValue, setcurrentValue] = useState<string>(curValue);
  const [currentText, setcurrentText] = useState<string>(curValue ? returnText(items, curValue):items[0].text);
  const defaultDataSource:Iitem[] = JSON.parse(JSON.stringify(items));

  useEffect(() => {
    const dataList: any = [];
    if (specialObj?.checked && specialObj?.item !== undefined) {
      items.map((item: any) => {
        if (item.value !== specialObj?.item?.value) {
          dataList.push(item)
        }
      })
      setDataSource(dataList);
    } else {
      setDataSource(items);
    }
  }, [ items, specialObj]);

  useEffect(() => {
    setcurrentValue(curValue);
    setcurrentText(curValue ? returnText(items, curValue):items[0].text);

  }, [curValue]);

  const filterHandler = (specialObj?: specialObjProps) => {
    if(!specialObj) return;
    const specialData = JSON.parse(JSON.stringify(specialObj));
    if (!specialData?.checked && specialData?.item !== undefined) {
      specialData.item = undefined;
      return specialData;
    }
    return specialData;
  }

  return (
    <div className={prefixCls} {...rest}>
      <div className="iot-pole-slider">
        <div className="iot-pole-slider-top">
          <div className="iot-pole-slider-left">
            {icon?.show && (
              <div className="iot-pole-slider-icon">
                <span
                  className={[
                    'iot-pole-slider-icon-image',
                    icon?.value ? icon.value : 'insideicon-cu-1',
                  ].join(' ')}
                ></span>
              </div>
            )}
            <div
              className="iot-pole-slider-title"
              style={{ marginLeft: icon?.show ? '0' : '.2rem' }}
            >
              <div className="iot-pole-slider-main">{title}</div>
            </div>
            <div className="line"></div>
            <div className="value-unit" style={{minWidth:'.64rem'}}>
              {specialObj?.item && specialObj?.checked && curValue === specialObj?.item?.value ? specialObj?.item?.text : currentText}
            </div>
          </div>
        </div>

        <div className="iot-pole-slider">
          <Slider
            curValue={currentValue + ''}
            disabled={false}
            styleType={styleType}
            defaultDataSource={defaultDataSource}
            specialObj={filterHandler(specialObj)}
            // 用户勾选了 并且 设置了item
            isSpecial={specialObj?.checked && specialObj?.item !== undefined}
            dotsData={dataSource}
            onchange={(val: any) => {
              const item = {
                streamId,
                value: val,
              };
              handler(item);
            }}
            move={(val: any) => {
              setcurrentValue(val.currentValue);
              setcurrentText(val.currentText);
            }}
            start={() => {
              startHandler('start');
            }}
          ></Slider>
        </div>
        <div
          className="disabled-pangle"
          style={{ display: `${disabled ? 'block' : 'none'}` }}
        ></div>
      </div>
    </div>
  );
};

export default IOTPoleSlider;