import './style.css';

const CODE = '1234';
let builder = '';

const display = document.getElementById('display') as HTMLDivElement;
const light = document.getElementById('light') as HTMLDivElement;
const keypad = document.getElementById('keypad') as HTMLDivElement;

function resetCode() {
  builder = '';
  display.innerText = '_'.repeat(CODE.length);
  light.classList.remove('is-success', 'is-error');
}

function composeDigit(digit: number) {
  builder += digit.toString();
  display.innerText = builder + '_'.repeat(CODE.length - builder.length);
  if (!CODE.startsWith(builder)) {
    light.classList.add('is-error');
    setTimeout(resetCode, 1000);
    return;
  }
  if (CODE === builder) {
    light.classList.add('is-success');
  }
}

for (let i = 1; i < 11; i++) {
  const digit = i % 10;
  const button = document.createElement('button');
  button.innerText = digit.toString();
  button.onclick = () => composeDigit(digit);
  keypad.appendChild(button);
}
const reset = document.createElement('button');
reset.innerText = 'C';
reset.onclick = resetCode;
keypad.appendChild(reset);
resetCode();