window.addEventListener('DOMContentLoaded', () => {
  function drew() {
    const cvs = document.getElementById('cv-cam');
    const ctx = cvs.getContext('2d');
    const refreshBtn = document.querySelector('.js-refresh');
    const returnBtn = document.querySelector('.js-return');
    const canvasProps = {
      width: 0,
      height: 0,
    };
    const drawRectProps = {
      x: 0,
      y: 0,
      width: 0,
      height: 0,
      style: '#000',
      lineWidth: 4,
    };
    const rectMoveProps = {
      id: 0,
      startX: 0,
      startY: 0,
      endX: 0,
      endY: 0,
      x: 0,
      y: 0,
      width: 0,
      height: 0
    }
    let canvasFlag = '';
    let i = 0;
    const result = {};
    const items = new Map();
    const retrunItems = new Map();

    function rectHit(x, y, w, h, point) {
      let positiveX = x < point.x && point.x < x + w;
      let positiveY = y < point.y && point.y < y + h;
      let negativeX = x > point.x && point.x > x + w;
      let negativeY = y > point.y && point.y > y + h;
      
      return (positiveX && positiveY) || (positiveX && negativeY) || (negativeX && positiveY) || (negativeX && negativeY);
    }

    function drawRect(e) {
      canvasFlag = 'rect'
      drawRectProps.x = e.offsetX;
      drawRectProps.y = e.offsetY;

      cvs.addEventListener('mousemove', getDrewRectPos, false);
    }
    
    function moveRect(e, id) {
      let item = items.get(id);
      canvasFlag = 'move'
      rectMoveProps.id = id;
      rectMoveProps.startX = e.offsetX;
      rectMoveProps.startY = e.offsetY;
      rectMoveProps.x = item.x;
      rectMoveProps.y = item.y;
      rectMoveProps.width = item.width;
      rectMoveProps.height = item.height;

      items.delete(rectMoveProps.id);
      cvs.addEventListener('mousemove', getMoveRectPos, false);
    }

    function getDrewRectStart(e) {
      e.preventDefault();
      e.stopPropagation();

      const point = {
        x: e.offsetX,
        y: e.offsetY
      };
      if(items.size) {
        for (let [key, item] of items) {
          result.truth = rectHit(item.x, item.y, item.width, item.height, point);
          if(result.truth) {
            result.id = key;
            break;
          }
        };

        if(result.truth) {
          moveRect(e, result.id)
        } else {
          drawRect(e);
        }
      } else {
        drawRect(e);
      }
    }
    
    function getDrewRectPos(e) {
      e.preventDefault();
      e.stopPropagation();

      drawRectProps.width = e.offsetX - drawRectProps.x;
      drawRectProps.height = e.offsetY - drawRectProps.y;

      ctx.clearRect(0, 0, canvasProps.width, canvasProps.height);
      if(items.size) {
        items.forEach(item => {
          ctx.strokeRect(item.x, item.y, item.width, item.height);
        })
      }
      ctx.strokeRect(drawRectProps.x, drawRectProps.y, drawRectProps.width, drawRectProps.height);
    }

    function getMoveRectPos(e) {
      e.preventDefault();
      e.stopPropagation();

      let moveX = e.offsetX - rectMoveProps.startX;
      let moveY = e.offsetY - rectMoveProps.startY;

      rectMoveProps.endX = rectMoveProps.x + moveX;
      rectMoveProps.endY = rectMoveProps.y + moveY;

      ctx.clearRect(0, 0, canvasProps.width, canvasProps.height);

      items.forEach(item => {
        ctx.strokeRect(item.x, item.y, item.width, item.height);
      })
      ctx.strokeRect(rectMoveProps.endX, rectMoveProps.endY, rectMoveProps.width, rectMoveProps.height);
    }

    function getDrewRectEnd(e) {
      e.preventDefault();
      e.stopPropagation();

      switch (canvasFlag) {
        case 'move':
          items.set(rectMoveProps.id, {
            x: rectMoveProps.endX,
            y: rectMoveProps.endY,
            width: rectMoveProps.width,
            height: rectMoveProps.height
          });

          cvs.removeEventListener('mousemove', getMoveRectPos, false);
          break;
        case 'rect':
          items.set(i, {
            x: drawRectProps.x,
            y: drawRectProps.y,
            width: drawRectProps.width,
            height: drawRectProps.height
          });
          i++;
          cvs.removeEventListener('mousemove', getDrewRectPos, false);
          break;
        default:
          break;
      }
      
      retrunItems.set(retrunItems.size, new Map(items));
      
      if(retrunItems.size) {
        returnBtn.disabled = false;
        refreshBtn.disabled = false;
      }
    }
    
    refreshBtn.addEventListener('click', () => {
      items.clear();
      ctx.clearRect(0, 0, canvasProps.width, canvasProps.height);
      retrunItems.set(retrunItems.size, new Map(items));
      refreshBtn.disabled = true;
    })

    returnBtn.addEventListener('click', () => {
      items.clear();
      if(retrunItems.size-1) {
        retrunItems.get(retrunItems.size - 2).forEach((item, key) => {
          items.set(key, item)
        })
        retrunItems.delete(retrunItems.size - 2);
        ctx.clearRect(0, 0, canvasProps.width, canvasProps.height);
        items.forEach(item => {
          ctx.strokeRect(item.x, item.y, item.width, item.height);
        })
      } else {
        retrunItems.clear();
        ctx.clearRect(0, 0, canvasProps.width, canvasProps.height);
        returnBtn.disabled = true;
        refreshBtn.disabled = true;
      }
    })

    canvasProps.width = window.innerWidth;
    canvasProps.height = window.innerHeight;
    cvs.width = canvasProps.width;
    cvs.height = canvasProps.height;
    ctx.strokeStyle = drawRectProps.style;
    ctx.lineWidth = drawRectProps.lineWidth;

    cvs.addEventListener('mousedown', getDrewRectStart, false);
    cvs.addEventListener('mouseup', getDrewRectEnd, false);
  }
  drew();
})