import React, { useCallback, useEffect, useRef, useState } from 'react';
import { dotInfoList } from "../../../number/sliderConfig";
import SliderControl from "../../../number/SliderControl";
import { specialObjProps,Iitem } from '../interface';
import './style.less';


interface SliderProps {
  curValue: string | number;
  onchange: (val: any) => void;
  start: () => void;
  disabled: boolean;
  barStyle?: 'line' | 'bar';
  bottomNumber?: boolean;
  move: (val: any) => void;
  dotsData: Iitem[];
  isSpecial?: boolean;
  specialObj:specialObjProps;
  styleType:string;
  defaultDataSource:Iitem[];
}
//  布局组件
const Slider = ({
  barStyle = 'line',
  isSpecial = false,
  specialObj,
  curValue,
  styleType,  
  disabled,
  onchange,
  dotsData,
  defaultDataSource,
  start,
  move,
}: SliderProps) => {
  const [progress, setProgress] = useState<string>('');
  const [currentVal, setCurrentVal] = useState<number>(0);
  const dataSourceList: any[] = dotInfoList(dotsData);

  // const [domParent,setDomParent] = useState();
  const refProgess = useRef(null);

  const setProcessPercent = useCallback(
    (processPercent: number) => {
      let currentValue: number = 0;
      let currentText: string = ''
      // 步长百分比值(每级所占整个slide长度的百分比值);
      const oneStepPercent = 100 / (dotsData.length - 1);
      // 1是最小值
      let currentStep = Math.round(processPercent / oneStepPercent) + 1;
      if (currentStep < 1) {
        currentStep = 1
      }
      if (currentStep > dotsData.length) {
        currentStep = dotsData.length
      }

      processPercent = dotInfoList(dotsData)[currentStep - 1]?.left;
      currentValue = Number.parseFloat(dotsData[currentStep - 1].value);
      currentText = dotsData[currentStep - 1].text;
      move({ currentValue, currentText });
      setCurrentVal(currentValue);
      setProgress(`${processPercent}`);
    },
    [dotsData, move]
  );


  useEffect(() => {
    // value 与 this.currentValue 是否一致;
    let isSame = true;
    // 通过对比value 与 this.currentValue 是否一致;
    isSame = curValue === currentVal;
    // 如果不一致 或者dots产生了变化 执行更新方法;
    if (!isSame) {
      let currentStepInd = 0;
      for (const [index, elem] of (dotsData).entries()) {
        if (curValue === elem.value) {
          currentStepInd = index;
        }
      }
      setProgress(`${dotInfoList(dotsData)[currentStepInd]?.left}`);
    }
  }, [curValue, barStyle, currentVal, dotsData, isSpecial])

  const SliderChildern = SliderControl({
    start: () => { start() },
    processHanlder: (processVal: any) => { setProcessPercent(processVal) },
    onchange: (changVal: any) => { onchange(changVal) },
    currentVal,
    refProgess
  });

  return (
    <div className="Slider">
      <div style={{ marginLeft: '.225rem' }}></div>
      <div className={`slider-bars`}>
        {/* 设置特殊值时，滑竿能滑动距离到数组的倒数第二个 */}
        <div className="slider-bar-inner" style={{ width: `${!isSpecial ? '100%' : dotInfoList(defaultDataSource)[defaultDataSource.length - 2]?.left + '%'}` }} ref={refProgess}>
          {/* 如果curValue !== 特殊值时,滑动的距离为0 */}
          <div className="progress" style={{ width: `${curValue !== specialObj?.item?.value ? progress : 0}%` }}>
            {/* 如果curValue !== 特殊值时显示ball，可滑动非特殊值的范围内 */}
            {
              curValue !== specialObj?.item?.value && (
                <div
                  className="ball-box"
                  {...SliderChildern}
                />
              )
            }
          </div>
          {
            styleType === '1' && (
              <>
              {
                dataSourceList.map((item: any, index: number) => (
                  <div key={`${item.text} ${index}`} className={`point-items ${(curValue !== specialObj?.item?.value && (Number.parseFloat(progress) > Number.parseFloat(item.left))) ? 'point-items-active' : ''}`} style={{ left: `${item.left}%` }}></div>
                ))
              }
              <div className="min-max">
                {
                  dataSourceList.map((item: any, index: number) => (
                    <div key={`${item.text} ${index}`} className='point-text-items' style={{ left: `${item.left}%` }}>{item.text}</div>
                  ))
                }
              </div>
              </>
            )
          }
        </div>
        {/* 设置特殊值时显示 */}
        {
          isSpecial &&
          // curValue === 特殊值时 高亮该点位
          (<>
            <div className={`point-items ${curValue === specialObj?.item?.value ? 'point-items-active' : ''} point-special`}></div>
            {
              // 是有极时才会出现文字
              styleType === '1' && (
                <div className='point-text-special'>{specialObj?.item?.text}</div>
              )
            }
          </>)
        }
      </div>
      <div style={{ marginRight: '.225rem' }}></div>
      {disabled && <div className="disabled"></div>}
    </div>
  );
};

export default Slider;