import { useCallback } from "react";

let sliderWidth: number;
let sliderOffsetLeft: number;
// let touchs: any;
let startX: number;
let startY: number;
let isTouched: boolean;
let isHorizontalMoved: boolean;


interface SliderProps {
  start:() => void;
  processHanlder: (arg: any) => any;
  onchange: (arg0: any) => any;
  currentVal:number;
  refProgess:any
}

/**
 * 
 * @param start 开始触摸事件
 * @param processHanlder move事件
 * @param onchange 触摸结束后事件
 * @param currentVal 参数值
 * @param refProgess ref实例 
 * @returns 
 */

const SliderControl = ({
  start,
  processHanlder,
  onchange,
  currentVal,
  refProgess
}: SliderProps) => {

  const onTouchStart: React.TouchEventHandler<HTMLDivElement> = useCallback(
    (e) => {
      const doms: any = refProgess.current;
      sliderWidth = parseFloat(doms.getBoundingClientRect().width);
      sliderOffsetLeft = parseFloat(doms.getBoundingClientRect().left);
      const touchs = e.changedTouches[0];
      startX = touchs.pageX;
      startY = touchs.pageY;
      isTouched = true;
      isHorizontalMoved = false;
      start();
    },
    [start]
  );

  const onTouchMove: React.TouchEventHandler<HTMLDivElement> = useCallback(
    (e) => {
      const touchs = e.changedTouches[0];
      const currentX = touchs.pageX;
      const currentY = touchs.pageY;
      const diffX = Math.abs(currentX - startX);
      const diffY = Math.abs(currentY - startY);
      // 在第一次触发touchmove时 判断是左右滑还是上下滑
      // 左右滑动时才是触动了滑杆的滑动 isHorizontalMoved = true;
      if (isTouched) {
        if (diffX * 0.8 > diffY) {
          isHorizontalMoved = true;
        }
        isTouched = false;
      }

      const processPercent =
        ((currentX - sliderOffsetLeft) / sliderWidth) * 100;

      // 只有在左右滑动时 滑杆才产生变化;
      if (isHorizontalMoved) {
        processHanlder(processPercent);
      }
    },
    [processHanlder]
  );

  const onTouchEnd = useCallback(() => {
    if (isHorizontalMoved) {
      onchange(currentVal);
    } else {
      // console.log('没有拖动不触发下发');
    }
  }, [currentVal, onchange]);

  return {
    onTouchStart: (e: any) => onTouchStart(e),
    onTouchMove: (e: any) => onTouchMove(e),
    onTouchEnd: () => onTouchEnd(),
    onTouchCancel: () => onTouchEnd(),
  };
}


export default SliderControl;