"use strict";

const input = document.getElementById("number");
const button = document.getElementById("convert-btn");
const output = document.getElementById("output");
let romNum = ''; // used in numToRoman function, which is recursive

button.addEventListener("click", () => {
  // Clear old value for romNum
  romNum = '';
  // Check if user's input is a number between 1 and 3999
  let userNum = Number(input.value);
  if (isNaN(Number(userNum)) || input.value === '') {
    output.innerText = "Please enter a valid number";
  } else if(userNum < 1) {
    output.innerText = "Please enter a number greater than or equal to 1";
  } else if(userNum > 3999) {
    output.innerText = "Please enter a number less than or equal to 3999";
  } else {
    output.innerText = numToRoman(userNum);
  }
})

const numToRoman = (num) => {
  // use a map so we can use numbers as keys
  const conversionTable = new Map();
  conversionTable
    .set(1000, "M")
    .set(900, "CM")
    .set(500, "D")
    .set(400, "CD")
    .set(100, "C")
    .set(90, "XC")
    .set(50, "L")
    .set(40, "XL")
    .set(10, "X")
    .set(9, "IX")
    .set(5, "V")
    .set(4, "IV")
    .set(1, "I");

    for(const [key, value] of conversionTable) {
      // if num is larger than or equal to key, add the Roman symbol
      // Need to test multiple times for some numbers
      console.log(num);
      if(num / key >= 1) {
        romNum += value;
        num -= key;
        console.log(romNum, "Remainder: ", num);
        return numToRoman(num);
      }
    }
  return romNum;
}