<template>
  <component :is="componentMap['tabs']" v-model="tabSelected">
    <component
      :is="componentMap['tab']"
      v-for="(rootGroup, index) in schema"
      :key="index"
      :label="rootGroup.description"
      v-bind="rootGroup"
      :name="index"
    />
  </component>
  <q-separator />
  <q-tab-panels v-model="tabSelected">
    <component
      v-for="(rootGroup, index) in schema"
      :key="index"
      :is="componentMap['tabPanel']"
      :name="index"
    >
      <!-- OBJECT WAY -->
      <div v-if="rootGroup.type == 'object'">
        <component
          v-if="isOneOf(rootGroup)"
          class="q-my-sm"
          :is="componentMap['oneOf']"
          v-model="dataForm[rootGroup.description]"
          v-bind="rootGroup"
        />
        <component
          v-if="isAllOf(rootGroup)"
          class="q-my-sm"
          :is="componentMap['allOf']"
          v-model="dataForm[rootGroup.description]"
          v-bind="rootGroup"
        />

        <component
          v-else
          class="q-my-sm"
          v-for="(level1, index) in rootGroup.properties"
          :key="index"
          :is="componentMap[level1.type]"
          v-model="dataForm[level1.description]"
          v-bind="level1"
        >
        </component>
      </div>
      <!-- ARRAY WAY -->
      <div v-else-if="rootGroup.type == 'array'">
        <component
          class="q-my-sm"
          v-for="(level1, index) in rootGroup.items.properties"
          :key="index"
          :is="componentMap[level1.type]"
          v-model="dataForm[level1.description]"
          v-bind="level1"
        >
          <div v-if="level1.type == 'object'">
            <component
              v-if="isOneOf(level1)"
              class="q-my-sm"
              :is="componentMap['oneOf']"
              v-model="dataForm[level1.description]"
              v-bind="level1"
            />
            <component
              v-if="isAllOf(level1)"
              class="q-my-sm"
              :is="componentMap['allOf']"
              v-model="dataForm[level1.description]"
              v-bind="level1"
            />
            <component
              v-else
              class="q-my-sm"
              v-for="(level2, index) in level1.properties"
              :key="index"
              :is="componentMap[level2.type]"
              v-model="dataForm[level2.description]"
              v-bind="level2"
            >
            </component>
          </div>
          <div v-if="level1.type == 'array'">
            <div v-if="'properties' in level1.items">
              <component
                class="q-my-sm"
                v-for="(level2, index) in level1.items.properties"
                :key="index"
                :is="componentMap[level2.type]"
                v-model="dataForm[level2.description]"
                v-bind="level2"
              />
            </div>
            <component v-else :is="componentMap['arrayField']"> </component>
          </div>
        </component>
      </div>
    </component>
  </q-tab-panels>
</template>

<script setup>
  import { computed, ref, onMounted } from 'vue';
  import {QTabPanels, QSeparator} from 'quasar'
  import { useComponentsMap } from './ComponentsMap.js';

  // PROPS & EMITS
  const emit = defineEmits(['update:modelValue']);
  const props = defineProps({
    schema: Object,
    modelValue: Object,
  });

  // PROPERTIES
  const { componentMap } = useComponentsMap();
  const tabSelected = ref('');
  const schemaSize = ref();

  // SEND MODEL TO PARENT
  const dataForm = computed({
    get() {
      return props.modelValue;
    },
    set(value) {
      emit('update:modelValue', value);
    },
  });

  const isOneOf = (obj) => {
    return 'oneOf' in obj ? true : false;
  };

  const isAllOf = (obj) => {
    return 'allOf' in obj ? true : false;
  };

  onMounted(() => {
    schemaSize.value = Object.keys(props.schema);
    tabSelected.value = schemaSize.value[0];
  });
  inheritAttrs: false;
</script>

<script>
  export default {
    name: 'FormGenerator'
  }
</script>
