const testObj = {
  someKey: "Some value",
  secondKey: "Second value",
  doSomeNesting: {
    coolString: "I think so!",
    coolBoolean: false,
    coolNumber: 22,
    firstNest: {
      gettingThere: "Great!",
      secondNest: {
        hope: "Works indeed!",
        someFn: () => {
          return "Something cool"
        },
        thirdNest: [
          { name: "lucky", age: 20},
          { name: "jack", age: 25},
        ],
        slick: true
      }
    }
  },
  callFunction: {
    someFn: () => {
      return "Returning something.."
    }
  }
}

const testArr = [
  "item1",
  "item2",
  {
    someObj: "abc",
    numeric: 123,
    arrInObj: [
      "testtest",
      {test: 123123}
    ]
  },
]

const preElm = document.querySelector('.pre-elm')!
let spaces = '  '
let level = 0

const generateLines = (data,level) => {
  if(level === 0) {
    preElm.innerHTML = Array.isArray(data) ? '[&#92n' : '{&#92n'
  }

  let valIsArray = false
  level = level + 1

  for(const [key,val] of Object.entries(data)) {
    if(typeof val === 'object') {
      valIsArray = Array.isArray(val)
      preElm.innerHTML += spaces.repeat(level) + '<span class="obj-key">' + key + '</span>:' + valIsArray ? '[&#92n' : '{&#92n'
      generateLines(val,level)
      if(level >= 1) {
        preElm.innerHTML += spaces.repeat(level) + valIsArray ? '],&#92n' : '},&#92n'
      }
    } else {
      let colorType = "string-val"
      if(typeof val === 'number') {
        colorType = 'number-val'
      } else if(typeof val === 'boolean') {
        colorType = 'boolean-val'
      } else if(typeof val === 'function') {
        colorType = 'function-val'
      }
      preElm.innerHTML += spaces.repeat(level) + '<span class="string-key">' + key + '</span>:' + typeof val === 'string' ? '<span class="' + colorType + '">' + val + '</span>' : '<span class="' + colorType + '">' + val + '</span> },&#92n'
    }
  }

  if(level === 1) {
    preElm.innerHTML += Array.isArray(data) ? ']&#92n' : '}&#92n'
  }
}

//Syntax highlight
generateLines(testObj,level)