import React, { useState, useEffect } from 'react';
import useLongPress from "./LongPress";
import { iIOTElementDoubleButtonProps } from "./interface";
import './style/index.less';

const prefixCls = 'iot-element-double-button';


const IOTDoubleButton: React.FC<iIOTElementDoubleButtonProps> = ({
  subTitle,
  streamId,
  btnTitle,
  leftBtn, //按钮图标
  rightBtn,
  handler = (val: any) => { },
  ...rest
}) => {

  const [timer, setTimer] = useState<any>(0);
  const [isNoStop, setIsNoStop] = useState<boolean>(false); // 不停止长按

  // 长按控制
  const onLongPress = (type: string) => {
    const time = setInterval(() => {
      handler(type)
    }, 500);
    setTimer(time)
  };

  useEffect(() => {
    if (!isNoStop && timer) {
      clearInterval(timer);
    }
  }, [isNoStop, timer]);

  // 左
  const changeLeftHnadler = useLongPress(
    () => { setIsNoStop(true); onLongPress('left') },
    () => { handler('left') },
    () => { setIsNoStop(false) });
  // 右
  const changeRightHnadler = useLongPress(
    () => { setIsNoStop(true); onLongPress('right') },
    () => { handler('right') },
    () => { setIsNoStop(false) });

  return (
    <div className={prefixCls} {...rest}>
      <div className='btn-box' {...changeLeftHnadler}>
        <i className={`btns ${leftBtn ? leftBtn : 'insideicon-reduce'}`} />
      </div>
      <span className='btn-text'>{btnTitle}</span>
      <div className='btn-box' {...changeRightHnadler}>
        <i className={`btns ${leftBtn ? leftBtn : 'insideicon-plus'}`} />
      </div>
    </div>
  )
}

export default IOTDoubleButton;