<div id="calculator">
  <div class="calculator__title"><img src="http://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/16/calculator-icon.png" alt=""><span>CALCULATOR</span></div>
  <div class="calculator__display">0</div>
  <div class="calculator__keys">
    <button data-action="reset">AC</button>
    <button data-action="negate">+/-</button>
    <button data-action="percentage">%</button>
    <button data-action="divide" class="key__side">/</button>
    <button>7</button>    
    <button>8</button>        
    <button>9</button>        
    <button data-action="multiply" class="key__side">x</button>
    <button>4</button>    
    <button>5</button>        
    <button>6</button>        
    <button data-action="subtract" class="key__side">-</button>  
    <button>1</button>    
    <button>2</button>        
    <button>3</button>        
    <button data-action="add" class="key__side">+</button>
    <button class="key__zero">0</button>        
    <button>.</button>        
    <button data-action="result" class="key__side">=</button>    
  </div>
</div>

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
$primary_color: #a9abab;
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: black;
}
* {
  box-sizing: border-box;
}
#calculator {
  width: 322px;
  height: 256px;
}
.calculator__title {
  background: lighten($primary_color, 10%);
  height: 28px;
  border-radius: 5px 5px 0 0;
  font-size: 0.8em;
  font-family: 'Helvetica-nue', sans-serif;
  padding: 3px;
  white-space:nowrap;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: 1fr;
  
  img {
   grid-column: 1;
   grid-row: 1;
   margin-top: 2px; 
    margin-left: 4px;
  }

  span {
      grid-column: 2;
       margin-top: 5px;
  }
}
.calculator__display {
  background-color: lighten($primary_color, 4%);
  height: 50px;
  color: #000;
  text-align: right;
  font-family: 'Roboto', Helvetica-nue, sans-serif;
  font-size: 2.6em;
  font-weight: 300;
  padding: 3px;
  overflow: hidden;
}
.calculator__keys {
  display: grid;
  grid-gap: 1px;
  grid-template-columns: repeat(4, 1fr);
  background-color: lighten($primary_color, 4%);
  border-radius: 0 0 5px 5px;
  overflow: hidden;
  
  button {
    background-color: lighten($primary_color, 20%);
    padding: 8px 0;
    font-size: 1em;
    border: none;
    
    &:focus{
      outline: none;
    }
    &.pressed {
      box-shadow: inset 0px 3px 15px -3px #a9abab;
    }
    
    &.key__side {
      background-color: #ff7f26;
      color: #fff;
      border: none;
      &:focus{
        outline: none;
      }
      &.pressed {
        box-shadow: inset 0px 3px 15px -3px darken(#ff7f26, 20%);
      }
    }
    &.key__zero {
      grid-column: 1 / span 2;
    }
  }
}

const display = document.querySelector('.calculator__display');
const buttons = document.querySelectorAll('button');

buttons.forEach(button => {
  button.addEventListener('click', compute);
});

function compute(e) {
  e.preventDefault();
  let action = this.dataset.action;
  let getNumber, calculation;
  let currentNumber = display.textContent;
  
  this.classList.add('pressed');
  
  setTimeout(() => {
    this.classList.remove('pressed');    
  }, 100);
  
  const calculate = (n1, operator, n2) => {
    let result = '';

    if (operator === 'add') {
      result = parseFloat(n1) + parseFloat(n2);
    } else if (operator === 'subtract') {
      result = parseFloat(n1) - parseFloat(n2);
    } else if (operator === 'multiply') {
      result = parseFloat(n1) * parseFloat(n2);
    } else if (operator === 'divide') {
      result = parseFloat(n1) / parseFloat(n2);
    } else if (operator === 'percentage') {
      result = (parseFloat(n1) / 100) * parseFloat(n2);
    }
    return result;
  }
  
  // Dont use 0 if its start
  if (currentNumber == '0' || display.dataset.previousKeyType == 'operator') {
    getNumber = this.textContent;     
  } else {
    if (action === 'negate') {
      getNumber = currentNumber;           
    } else {
      getNumber = currentNumber + this.textContent;     
    }
  }
  
  if (action === 'reset') { // RESET
     display.textContent = 0;
  } else if (action === 'negate') { // NEGATE
    console.log(getNumber[0]);
    if (currentNumber == '0') {
      getNumber = '0';
    } else {
      if(getNumber[0] == '-') {
        display.textContent = getNumber.slice(1);
      } else {
        display.textContent = '-' + getNumber;
      }
    }
  } else if ( // OPERATION
    action === 'add' ||
    action === 'subtract' ||
    action === 'multiply' ||
    action === 'divide' ||
    action === 'percentage'
  ) {
    // Add custom attribute
    display.dataset.previousKeyType = 'operator';
    display.dataset.firstValue = getNumber.slice(0, -1)
    display.dataset.operator = action;    
  } else if (action === 'result') {     // RESULT
    const firstValue = display.dataset.firstValue;
    const operator = display.dataset.operator;
    const secondValue = getNumber.slice(0, -1);
    calculation = calculate(firstValue, operator, secondValue);
    display.textContent = calculation;
  } else { // NUMBERS
    display.textContent = getNumber;
    display.dataset.previousKeyType = 'number';
  }

  
}