<template>
  <ul>
    <li
      v-for="(item, i) of arrData"
      :key="i"
    >
      <ObjectViewer v-if="Array.isArray(item)" :arrData="item" />
      <ObjectViewer v-else-if="typeof item === 'object'" :objData="item" />
      <template v-else>{{item}}</template>
    </li>
    <li
      v-for="(value, key) of objData"
      :key="key"
    >
      <template v-if="Array.isArray(value)">
        {{ key | formatObjectKey }}
        <ObjectViewer :arrData="value" />
      </template>
      <template v-else-if="typeof value === 'object'">
        {{ key | formatObjectKey }}
        <ObjectViewer :objData="value" />
      </template>
      <template v-else><strong>{{ key | formatObjectKey }}</strong>: {{value}}</template>
    </li>
  </ul>
</template>
<script>
export default {
  name: 'ObjectViewer',
  filters: {
    formatObjectKey (val) {
      if(!val) return ''
      if(/ /.test(val)) return val
      if(/_/.test(val)) {
        const words = val.split(/_/)
        return words.map(w => w.slice(0, 1).toLocaleUpperCase().concat(w.slice(1))).join(' ')
      }
      if(/[A-Z]/.test(val)) {
        return val.replace(/([^A-Z]*)([A-Z])/g, (match, lc, uc) => `${lc} ${uc}`).replace(/^[a-z]/, m => m.toLocaleUpperCase())
      }
      return val
    }
  },
  props: {
    objData: Object,
    arrData: Array
  }
}
</script>
