const brushSelect = document.querySelector('#size'),
      canvas      = document.querySelector('#draw'),
      colorSelect = document.querySelector('#color-picker'),
      colors      = document.querySelectorAll('#colors span'),
 /*      resetButton = document.querySelector('#reset'), */
      saveButton  = document.querySelector('#save'),
      tools       = document.querySelectorAll('#tools span');

/* canvas.height = window.innerHeight ;
canvas.width  = window.innerWidth * .9;  //90% canvas width, 10% toolbar width */

const ctx = canvas.getContext('2d');

ctx.fillStyle   = 'rgba(0, 0, 0, 0)';
ctx.lineCap     = 'round';
ctx.lineWidth   = 1;
ctx.strokeStyle = 'black';

ctx.fillRect(0, 0, canvas.width, canvas.height);

const startingCanvas = canvas.toDataURL();

let brushSize    = '10px',
    currentColor = 'black',
    currentTool  = 'pencil',
    isDrawing    = false,
    lastX        = 0,
    lastY        = 0,
    rect         = '';

const continuousDraw = (e) => {
  e.preventDefault();
  if (!isDrawing) return;
   
  ctx.beginPath();
  ctx.moveTo(lastX, lastY);
  e.touches ? ctx.lineTo(e.touches[0].pageX - rect.left, e.touches[0].pageY - rect.top) : ctx.lineTo(e.offsetX, e.offsetY);
  [lastX, lastY] = e.touches ? [e.touches[0].pageX - rect.left, e.touches[0].pageY - rect.top] : [e.offsetX, e.offsetY];
  ctx.stroke();
}

const startDraw = (e) => {
  e.preventDefault();
  rect = e.target.getBoundingClientRect();
  isDrawing = true;
  [lastX, lastY] = e.touches ? [e.touches[0].pageX - rect.left, e.touches[0].pageY - rect.top] : [e.offsetX, e.offsetY];
  continuousDraw(e);
}

  //normal functions used here to preverse "this" from event listeners
function changeColor() {
  currentColor = this.dataset.color;
  ctx.strokeStyle = currentTool !== 'eraser' ? this.dataset.color : 'white';
  colors.forEach(color => color === this ? color.classList.add('active-color') : color.classList.remove('active-color'));
}

function colorPicker() {
  currentColor = this.value;
  ctx.strokeStyle = currentTool !== 'eraser' ? this.value : 'white';
  colors.forEach(color => color.classList.remove('active-color'));
}

  //currently everything is setup to work with 3 tool types.  If more tools are added, the conditionals will have to be reworked
function setTool() {
  if (this.dataset.name === 'pencil') {
    ctx.lineWidth = 1;
    currentTool = 'pencil';
  } else {
    ctx.lineWidth = brushSize > 1 ? brushSize : 10;
    currentTool = this.dataset.name === 'eraser' ? 'eraser' : 'brush';
  }
  tools.forEach(tool => tool === this ? tool.classList.add('active-tool') : tool.classList.remove('active-tool'));

  ctx.lineCap = this.dataset.name === 'eraser' ? 'square' : 'round';

   if(this.dataset.name === 'eraser'){

    ctx.globalCompositeOperation = 'destination-out';
    //ctx.strokeStyle = "white";
  }else{
  
    ctx.globalCompositeOperation = 'source-over';

    /* if(ctx.globalCompositeOperation == 'destination-out'){
      ctx.globalCompositeOperation = 'source-in';
    } */

    ctx.strokeStyle = currentColor;
  }
   

  //ctx.strokeStyle = this.dataset.name === 'eraser' ? ctx.globalCompositeOperation = 'destination-out' : currentColor; 
}

function downloadImage(e) {
  if (startingCanvas === canvas.toDataURL()) return e.preventDefault();

  this.download = prompt('Please name your picture:');
  if (this.download === 'null') return e.preventDefault();

  this.href = canvas.toDataURL('image/png');
}

function reset() {
  if (startingCanvas === canvas.toDataURL()) return;

  if (!confirm('Are you sure you want to delete all of your work?')) return;

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}

  //toolbar event listeners
brushSelect.addEventListener('click', () => {
  brushSize = brushSelect.value;

  ctx.lineWidth = currentTool === 'pencil' ? 1 : brushSize;

});
colorSelect.addEventListener('change', colorPicker);
saveButton.addEventListener('click', downloadImage);
/* resetButton.addEventListener('click', reset); */

tools.forEach(tool => tool.addEventListener('click', setTool));
colors.forEach(color => color.addEventListener('click', changeColor));

  // canvas event listeners
canvas.addEventListener('mousedown', startDraw);
canvas.addEventListener('mousemove', continuousDraw);
canvas.addEventListener('mouseup', () => isDrawing = false);
canvas.addEventListener('touchstart', startDraw);
canvas.addEventListener('touchmove', continuousDraw);
canvas.addEventListener('touchend', () => isDrawing = false);