import { useEffect, useState, useRef, useCallback } from 'react';

export default function useDraw(dom, flag) {
  const [state, setState] = useState({ rect: [0, 0, 0, 0], isEnd: false });
  const selectOptionsRef = useRef({
    start: [0, 0],
    end: [0, 0],
    startSelect: false,
  });

  /**
   * 绘制框选矩形区域
   */
  const drawSelectRact = useCallback(
    (isEnd) => {
      const { left, top, width, height } = dom.getBoundingClientRect();
      let [x, y, w, h] = [0, 0, 0, 0];
      //TODO 开始X > 结束X
      if (selectOptionsRef.current.end[0] > selectOptionsRef.current.start[0]) {
        x = selectOptionsRef.current.start[0] - left;
        w = selectOptionsRef.current.end[0] - selectOptionsRef.current.start[0];
      }

      //TODO 开始X < 结束X
      if (selectOptionsRef.current.end[0] < selectOptionsRef.current.start[0]) {
        x = selectOptionsRef.current.end[0] - left;
        w = selectOptionsRef.current.start[0] - selectOptionsRef.current.end[0];
      }

      //TODO 开始Y > 结束Y
      if (selectOptionsRef.current.end[1] > selectOptionsRef.current.start[1]) {
        y = selectOptionsRef.current.start[1] - top;
        h = selectOptionsRef.current.end[1] - selectOptionsRef.current.start[1];
      }

      //TODO 开始Y < 结束Y
      if (selectOptionsRef.current.end[1] < selectOptionsRef.current.start[1]) {
        y = selectOptionsRef.current.end[1] - top;
        h = selectOptionsRef.current.start[1] - selectOptionsRef.current.end[1];
      }
      if (w + x > width) {
        w = width - x;
      }
      if (h + y > height) {
        h = height - y;
      }
      if (w * h < 160 && isEnd) {
        setState({ rect: [0, 0, 0, 0], isEnd: !!isEnd });
      } else {
        setState({ rect: [x, y, w, h], isEnd: !!isEnd });
      }
    },
    [dom]
  );

  /**
   * move 修改框选区域
   */
  const changeSelect = useCallback(
    (event) => {
      if (selectOptionsRef.current.startSelect) {
        selectOptionsRef.current.end = [event.clientX, event.clientY];
        drawSelectRact(false);
      }
    },
    [drawSelectRact]
  );

  /**
   * 结束当前框选
   */
  const selectEnd = useCallback(
    (event) => {
      if (selectOptionsRef.current.startSelect) {
        selectOptionsRef.current.startSelect = false;
        selectOptionsRef.current.end = [event.clientX, event.clientY];
        drawSelectRact(true);
      }
    },
    [drawSelectRact]
  );

  const openSelect = useCallback((event) => {
    selectOptionsRef.current.startSelect = true;
    selectOptionsRef.current.start = [event.clientX, event.clientY];
  }, []);

  useEffect(() => {
    if (dom && flag) {
      dom.addEventListener('mousedown', openSelect, false);
      dom.addEventListener('mousemove', changeSelect, false);
      dom.addEventListener('mouseup', selectEnd, false);
    }
    if (dom && !flag) {
      setState((old) => ({ ...old, rect: [0, 0, 0, 0] }));
    }
    return () => {
      if (dom) {
        dom.removeEventListener('mousedown', openSelect, false);
        dom.removeEventListener('mousemove', changeSelect, false);
        dom.removeEventListener('mouseup', selectEnd, false);
      }
    };
  }, [changeSelect, dom, flag, openSelect, selectEnd]);
  return [state.rect, state.isEnd];
}
