import React, { useState, useRef } from 'react';
import { iIOTDirectionProps } from './interface';
// const Down  = require("./static/down.png");
import Down from "./static/down.png";

import './style/index.less';

const prefixCls = 'iot-direction';
const SliderControl: React.FC<iIOTDirectionProps> = ({
  subTitle,
  type,
  streamId,
  handler = (val: any) => { },
  clickHandler = (val: any) => { },
  ...rest
}) => {

  const controlRef: any = useRef();
  const [direction, setDirection] = useState<string>('up');
  const [active, setActive] = useState<boolean>(false);
  const [showArrow, setShowArrow] = useState<boolean>(false);
  const [startX, setStartX] = useState<number>(0);
  const [startY, setStartY] = useState<number>(0);
  const [isTouched, setTouched] = useState<boolean>(false);
  let hideArrowTimer: NodeJS.Timeout | null = null


  const startHandle = (e: any) => {
    const touches = e.changedTouches[0];
    setStartX(touches.clientX);
    setStartY(touches.clientY);
    setShowArrow(false);
  }

  const moveHandle = () => {
    (document as any).documentElement.style.overflow= 'hidden';
    setTouched(true);
    setActive(true);
    if (showArrow) {
      setShowArrow(false);
    }
    if (hideArrowTimer) {
      clearTimeout(hideArrowTimer);
    }
  }

  const endHandle = (e: any) => {
    (document as any).documentElement.style.overflow='auto';
    let direction = 'up'
    const touches = e.changedTouches[0];
    const currentX = touches.clientX;
    const currentY = touches.clientY;

    const diffX = currentX - startX;
    const diffY = currentY - startY;

    const absDiffX = Math.abs(diffX);
    const absDiffY = Math.abs(diffY);

    if (isTouched) {
      if (absDiffX * 0.8 > absDiffY) {
        direction = diffX > 0 ? 'right' : 'left';
        // setDirection(diffX > 0 ? 'right' : 'left')
      } else {
        direction = diffY > 0 ? 'down' : 'up';
        // setDirection(diffX < 0 ? 'down' : 'up');
      }
      setShowArrow(true);
      setTouched(false);
      controlDevice(direction);
    }
    // 在滑动结束后隐藏滑动箭头;
    hideArrowTimer = setTimeout(() => {
      setShowArrow(false);
      setActive(false);
    }, 200);
  }

  const clickHandle = () => {
    setActive(true);
    const item: any = {
      streamId
    };
    clickHandler?.(item);
    setTimeout(() => {
      setActive(false);
    }, 600);
  }

  const controlDevice = (direction: string) => {
    const item: any = {
      streamId,
      value:direction,
    };
    handler?.(item);

  }

  return (
    <div
      ref={controlRef}
      // className={`slider-control ${active ? 'active' : ''}`}
      className={prefixCls}
      onTouchStart={startHandle}
      onTouchMove={moveHandle}
      onTouchEnd={endHandle}
      onTouchCancel={endHandle}
      onClick={clickHandle}
      {...rest}
    >
      <span>朝箭头方向滑动可调节方向</span>
      <span style={{ marginTop: '.08rem' }}>点击中间区域可确定/播放/暂停</span>
      {
        [1, 2, 3, 4].map((item, index) => (
          <img
            src={Down}
            key={'img' + index}
            className={`control-img control-img-${index + 1}`}
            alt=""
          />
        ))
      }
      {/* {
        showArrow &&  <img className={`slide-control-img-${direction}`} src={slideUp} alt="" />
      } */}
    </div>
  )
}

export default SliderControl;