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

interface SliderProps {
  leftIcon?: string;
  rightIcon?: string;
  curValue: string | number;
  onchange: (val: any) => void;
  start: () => void;
  min: number;
  max: number;
  step: number;
  disabled: boolean;
  barStyle?: 'line' | 'bar';
  showHandleBtn: boolean;
  bottomNumber?: boolean;
  move: (val: any) => void;
  isStep?: boolean;
  defaultMin:string;
  defaultMax:string;
  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 = 'line',
  curValue,
  min,
  max,
  defaultMin,
  defaultMax,
  disabled,
  onchange,
  dotsData,
  step,
  start,
  move,
  isStep = true,
  showHandleBtn = true,
}: 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 (typeof curValue === 'string') {
        if (Number.parseFloat(curValue) < min) {
          setCurrentVal(min);
          setProgress(`${0  }%`);

          return;
        } if (Number.parseFloat(curValue) > max) {
          setCurrentVal(max);
          setProgress(`${100  }%`);

          return;
        }
        const processPercent = (Number.parseFloat(curValue) - min) * (100 / (max - min));

        setProgress(`${processPercent  }%`);
      }
    }
  }, [curValue, min, max, barStyle]);

  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 = Number.parseInt(s.toString());
        }
      }  // 有极
      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]
  );


  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 SliderChildern = SliderControl({
    start: () => { start() },
    processHanlder: (processVal: any) => { setProcessPercent(processVal) },
    onchange: (changVal: any) => { onchange(changVal) },
    currentVal,
    refProgess
  });

  return (
    <div className="Slider">
      {showHandleBtn ? (
        <div
          className={`icon icon-left ${leftIcon} ${ Number.parseFloat(min+'') === Number.parseFloat(curValue+'') ? 'icon-disabled' : '' }`}
          onClick={() => {
            if (disabled) return;
            let addValue = 0;
            // 无极
            if (isStep) {
              addValue = Number(curValue) * 10 - step * 10;
            } else {
              // 有极 最后一项和倒数第二项差
              const stepTemp = dotsData[dotsData.length - 1].text - dotsData[dotsData.length - 2].text;
              // ===0 说明整个数组等分取step
              const stepTemp1 = stepTemp !== 0 ? stepTemp : step
              // Number(curValue) === dotsData[dotsData.length - 1].text 是最后一个，取差值，不是取step
              addValue = Number(curValue) * 10 - (Number(curValue) === dotsData[dotsData.length - 1].text ? stepTemp1 : step) * 10;
            }
            const value =
              addValue / 10 < min ? min : addValue / 10;
            onchange(value);
          }}
        ></div>
      ) : (
        <div
          className={`icon icon-number-left `}
        >{defaultMin}</div>
      )}

      <div className={`slider-bar`}>
        <div className="slider-bar-inner" ref={refProgess}>
          <div className="progress" style={{ width: progress }}>
            <div
              className="ball"
              {...SliderChildern}
            ></div>
          </div>
          {
            showHandleBtn && (<div className="min-max">
              <div className="min">{defaultMin}</div>
              <div className="max">{defaultMax}</div>
            </div>)
          }

        </div>
      </div>
      {showHandleBtn ? (
        <div
          className={`icon icon-right ${rightIcon}  ${ Number.parseFloat(max+'') === Number.parseFloat(curValue+'') ? 'icon-disabled' : '' }`}
          onClick={() => {
            if (disabled) return;
            const addValue = Number(curValue) * 10 + step * 10;
            const value =
              addValue / 10 > max ? max : addValue / 10;
            onchange(value);
          }}
        ></div>
      ) : (
        <div
          className={`icon icon-number-right`}
        >{defaultMax}</div>
      )}

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

export default Slider;