<div id="wrapper">
  <div id="buildZone">
    <canvas id="canvas"></canvas>
    <div id="controls">
      <i id="square" class="feather icon-square"></i>
      <i id="circle" class="feather icon-circle"></i>
      <i id="triangle" class="feather icon-triangle"></i>
      <i id="clear" class="feather icon-trash"></i>
    </div>
  </div>
  <div id="styleZone"></div>
</div>

// VARIABLES  ―――――――――――――――――――――――――

$mainTint: #2c2f36;
$defaultTextColor: white;
$primaryColor: #4881b8;
$dangerColor: #e54f6b;
$controlsRatio: 1.3;


// GLOBAL ―――――――――――――――――――――――――

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  height: 100vh;
  font-size: 14px;
  background: $mainTint;
  color: $defaultTextColor;
  padding: 30px;
}

#wrapper { margin: auto; }
#buildZone { display: flex; }

.canvas-container, #canvas { transition: all 0.2 ease-in-out; }

#canvas {
  background: darken($mainTint, 5%);
  border-radius: 5px;
}


// CONTROLS  ―――――――――――――――――――――――――

#controls {
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  
  i {
    background: $primaryColor;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: #{$controlsRatio}em;
    border-radius: 100%;
    transition: all 0.2s ease-in-out;
    margin: 5px 0;
    
    &:hover {
      background: lighten($primaryColor, 8%);
      cursor: pointer;
    }
  }
  
  #clear {
    background: $dangerColor;
    margin-top: auto;
    &:hover { background: lighten($dangerColor, 8%); }
  }
}

// STYLE-ZONE  ―――――――――――――――――――――――――

#styleZone {
  display: flex;
  margin-top: 20px;
  
  span {
    width: 60px;
    height: 30px;
    border-radius: 3px;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
    border: 2px solid transparent;
    
    &.isSelected i {
      opacity: 1;
      transform: scale(1);
    }
    
    &:hover, &.isSelected {
      cursor: pointer;
      border-color: $defaultTextColor;
    }
  }
  
  i {
    opacity: 0;
    transition: all 0.3s cubic-bezier(.56, .35, 0, 1.7);
    transform: scale(0.6);
  }
}

const canvas = new fabric.Canvas('canvas', { width: 640, height: 360 });

// Resize canvas

const buildZone = document.getElementById('buildZone');
const wrapper = document.getElementById('wrapper');
const paddingShift = 60;

function resizeCanvas() {
  // Width
  const newWidth = canvas.getWidth() + (window.innerWidth - (buildZone.offsetWidth + paddingShift));
  if(newWidth < 640 && newWidth > 200) canvas.setWidth(newWidth);
  
  // Height
  const newHeight = canvas.getHeight() + (window.innerHeight - (wrapper.offsetHeight + paddingShift));
  if(newHeight < 360 && newHeight > 250) canvas.setHeight(newHeight);
}

window.addEventListener('resize', resizeCanvas);
resizeCanvas();


// Clear canvas - Delete shapes

document.getElementById('clear').addEventListener('click', () => {
  !deleteActiveObjects() && canvas.clear();
});

document.addEventListener('keydown', (event) => {
   event.keyCode === 46 && deleteActiveObjects();
})

function deleteActiveObjects() {
  const activeObjects = canvas.getActiveObjects();
  if(!activeObjects.length) return false;
  
  if(activeObjects.length) {
    activeObjects.forEach(function(object) {
      canvas.remove(object);
    });
  } else {
    canvas.remove(activeObjects);
  }
  
  return true;
}


// SHAPES STYLES  ―――――――――――――――――――――――――

const styleZone = document.getElementById('styleZone');
const colors = ['#43c8bf', '#896bc8', '#e54f6b'];
let defaultColor = colors[0];
let activeElement = null;
const isSelectedClass = 'isSelected';

colors.forEach((color, i) => {
  const span = document.createElement('span');
  span.style.background = color;
  
  if(i === 0) {
    span.className = isSelectedClass;
    activeElement = span;
  }
  
  let icon = document.createElement('i');
  icon.className = 'feather icon-check';
  span.appendChild(icon);
  
  styleZone.appendChild(span);
  
  span.addEventListener('click', (event) => {
    if(span.className !== isSelectedClass) {
      span.classList.toggle(isSelectedClass);
      activeElement.classList.remove(isSelectedClass);
      activeElement = span;
      strokeColor = color;
    }
    
    if(canvas.getActiveObject()) {
      const activeObjects = canvas.getActiveObjects();
      if (!activeObjects.length) return;

      activeObjects.forEach(function (object) {
        object.set('stroke', strokeColor);
      });
      
      canvas.renderAll();
    }
  })
});


// SHAPES CREATION  ―――――――――――――――――――――――――

let strokeWidth = 2;
let strokeColor = defaultColor;

// Square

document.getElementById('square').addEventListener('click', () => {
  canvas.add(new fabric.Rect({
    strokeWidth: strokeWidth,
    stroke: strokeColor,
    fill: 'transparent',
    width: 50,
    height: 50,
    left: 100,
    top: 100
  }));
});

// Circle

document.getElementById('circle').addEventListener('click', () => {
  canvas.add(new fabric.Circle({
    radius: 30,
    strokeWidth: strokeWidth,
    stroke: strokeColor,
    fill: 'transparent',
    left: 100,
    top: 100
  }));
});

// Triangle

document.getElementById('triangle').addEventListener('click', () => {
  canvas.add(new fabric.Triangle({
    strokeWidth: strokeWidth,
    stroke: strokeColor,
    fill: 'transparent',
    width: 50,
    height: 50,
    left: 100,
    top: 100
  }));
});