import React, { useCallback, useEffect, useRef, useState } from 'react';
import { dotInfoList } from "../../sliderConfig";
import SliderControl from "../../SliderControl";
import './fatSlider.less';

interface SliderProps {
  leftIcon?: string;
  rightIcon?: string;
  curValue: number;
  onchange: (val: any) => void;
  start: () => void;
  min: number;
  max: number;
  step: number;
  disabled: boolean;
  barStyle?: 'line' | 'bar';
  showHandleBtn: boolean;
  move: (val: any) => void;
  isStep?: boolean;
  dotsData?: any;  /**
                     * 滑杆下面的文字信息列表,有级时 以此来判断份几级
                     * dots是一组json对象组成的数组;
                     * 包含的字段: value、text、icon;
                     * 例: [{value: 10, text: '低档', icon: model-cool},{value: 20, text: '中档',                    icon: model-cool}];
                     * */
}
//  布局组件
const Slider = ({
  leftIcon = 'insideicon-reduce',
  rightIcon = 'insideicon-plus',
  barStyle = 'bar',
  curValue,
  min,
  max,
  disabled,
  onchange,
  dotsData,
  step,
  start,
  move,
  isStep = true,
  showHandleBtn = false,
}: SliderProps) => {
  const [progress, setProgress] = useState<string>('');

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

  useEffect(() => {
    // console.log('Slider, useEffect, curValue', curValue);
    if (curValue !== void 0) {
      if (curValue < min) {
        setCurrentVal(min);
        setProgress(`${min  }%`);
        return;
      } if (curValue > max) {
        setCurrentVal(max);
        setProgress(`${max  }%`);
        return;
      }
      const processPercent = (curValue - min) * (100 / (max - min));
      setProgress(`${processPercent  }%`);
    }
  }, [curValue, min, max]);



  useEffect(() => {
    if (isStep) return;
    // value 与 this.currentValue 是否一致;
    let isSame = true;
    // 通过对比value 与 this.currentValue 是否一致;
    isSame = curValue === currentVal;
    // 如果不一致 或者dots产生了变化 执行更新方法;
    if (!isSame) {
      // 无级
      if (isStep) {
        if (curValue < min) {
          setCurrentVal(min);
          return;
        } if (curValue > max) {
          setCurrentVal(max);
          return;
        }
        setProgress(JSON.stringify(((curValue as any) - min) * (100 / (max - min))));
      } else {
        let currentStepInd = 0;
        for (const [index, elem] of (dotsData).entries()) {
          if ((curValue as any) === JSON.stringify(elem.text)) {
            currentStepInd = index;
          }
        }
        setProgress(`${dotInfoList(dotsData)[currentStepInd]?.left  }%`);
      }
    }
  }, [curValue, min, max, barStyle, isStep, currentVal, dotsData])

  const setProcessPercent = useCallback(
    (processPercent: number) => {
      let currentValue: number = 0;
      if (isStep) {
        const valueDiff: number = max - min;
        if (processPercent <= 0) {
          processPercent = 0;
          currentValue = min;
        } else if (processPercent >= 100) {
          processPercent = 100;
          currentValue = max;
        } else {
          const s: number = (valueDiff * processPercent) / 100 + min;
          currentValue = parseInt(s.toString(), 10);
        }
      }  // 有极
      else {
        // 步长百分比值(每级所占整个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 = dotsData[currentStep - 1].text;
      }
      move(currentValue);
      // console.log(currentValue);
      setCurrentVal(currentValue);
      setProgress(`${processPercent  }%`);
    },
    [dotsData, isStep, max, min, move],
  );

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

  const prefixCls = 'fatSlider';
  return (
    <div className={`${prefixCls} Slider`}>
      {showHandleBtn ? (
        <div
          className={`icon icon-left ${leftIcon}`}
          onClick={() => {
            if (disabled) return;
            const value = curValue - step < min ? min : curValue - step;
            onchange(value);
          }}
        ></div>
      ) : null}
      <div className={`slider-bar slider-bar-${barStyle}`}>
        <div className="slider-bar-inner" ref={refProgess}></div>
        <div className="progress" style={{ width: progress }}>
          <div
            className="ball"
            {...SliderChildern}
          ></div>
          {/* <div className="progress-inner">
            
          </div> */}
        </div>
      </div>
      {showHandleBtn ? (
        <div
          className={`icon icon-right ${rightIcon}`}
          onClick={() => {
            if (disabled) return;
            const value = curValue + step > max ? max : curValue + step;
            onchange(value);
          }}
        ></div>
      ) : null}

      {disabled && <div className="disabled"></div>}
    </div>
  );
};

export default Slider;