<template>
  <div>
    <p class="text-overline">{{ attrs.description }}</p>
  </div>
  <div v-for="(item, index) in attrs.allOf" :key="index">
    <div v-for="(rootGroup, index) in item.properties" :key="index">
      <component :is="componentMap[rootGroup.type]" v-bind="rootGroup">
        <!-- 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.name]"
            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
                class="q-my-sm"
                v-for="(level2, index) in level1.properties"
                :key="index"
                :is="componentMap[level2.type]"
                v-model="dataForm[level2.name]"
                v-bind="level2"
              >
                <div v-if="level2.type == 'object'">
                  <component
                    v-if="isOneOf(level2)"
                    class="q-my-sm"
                    :is="componentMap['oneOf']"
                    v-model="dataForm[level2.description]"
                    v-bind="level2"
                  />
                  <component
                    v-if="isAllOf(level2)"
                    class="q-my-sm"
                    :is="componentMap['allOf']"
                    v-model="dataForm[level2.description]"
                    v-bind="level2"
                  />
                  <component
                    class="q-my-sm"
                    v-for="(level3, index) in level2.properties"
                    :key="index"
                    :is="componentMap[level3.type]"
                    v-model="dataForm[level3.name]"
                    v-bind="level3"
                  >
                  </component>
                </div>
                <div v-if="level2.type == 'array'">
                  <div v-if="'properties' in level2.items">
                    <component
                      class="q-my-sm"
                      v-for="(level3, index) in level2.items.properties"
                      :key="index"
                      :is="componentMap[level3.type]"
                      v-model="dataForm[level3.name]"
                      v-bind="level3"
                    >
                    </component>
                  </div>
                  <component v-else :is="componentMap['arrayField']" />
                </div>
              </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.name]"
                  v-bind="level2"
                >
                </component>
              </div>
              <component v-else :is="componentMap['arrayField']" />
            </div>
          </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.name]"
            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.name]"
                v-bind="level2"
              >
                <div v-if="level2.type == 'object'">
                  <component
                    v-if="isOneOf(level2)"
                    class="q-my-sm"
                    :is="componentMap['oneOf']"
                    v-model="dataForm[level2.description]"
                    v-bind="level2"
                  />
                  <component
                    v-if="isAllOf(level2)"
                    class="q-my-sm"
                    :is="componentMap['allOf']"
                    v-model="dataForm[level2.description]"
                    v-bind="level2"
                  />
                  <component
                    class="q-my-sm"
                    v-for="(level3, index) in level2.properties"
                    :key="index"
                    :is="componentMap[level3.type]"
                    v-model="dataForm[level3.name]"
                    v-bind="level3"
                  >
                    <div v-if="level3.type == 'object'">
                      <component
                        v-if="isOneOf(level3)"
                        class="q-my-sm"
                        :is="componentMap['oneOf']"
                        v-model="dataForm[level3.description]"
                        v-bind="level3"
                      />
                      <component
                        v-if="isAllOf(level3)"
                        class="q-my-sm"
                        :is="componentMap['allOf']"
                        v-model="dataForm[level3.description]"
                        v-bind="level3"
                      />
                      <component
                        class="q-my-sm"
                        v-for="(
                          subLevelInfraComponent, index
                        ) in level3.properties"
                        :key="index"
                        :is="componentMap[subLevelInfraComponent.type]"
                        v-model="dataForm[subLevelInfraComponent.name]"
                        v-bind="subLevelInfraComponent"
                      >
                      </component>
                    </div>
                    <div v-if="level3.type == 'array'">
                      <div v-if="'properties' in level3.items">
                        <component
                          class="q-my-sm"
                          v-for="(level4, index) in level3.items.properties"
                          :key="index"
                          :is="componentMap[level4.type]"
                          v-model="dataForm[level4.name]"
                          v-bind="level4"
                        >
                        </component>
                      </div>
                      <component v-else :is="componentMap['arrayField']" />
                    </div>
                  </component>
                </div>
                <div v-if="level2.type == 'array'">
                  <div v-if="'properties' in level2.items">
                    <component
                      class="q-my-sm"
                      v-for="(level3, index) in level2.items.properties"
                      :key="index"
                      :is="componentMap[level3.type]"
                      v-model="dataForm[level3.name]"
                      v-bind="level3"
                    >
                      <div v-if="level3.type == 'object'">
                        <component
                          v-if="isOneOf(level3)"
                          class="q-my-sm"
                          :is="componentMap['oneOf']"
                          v-model="dataForm[level3.description]"
                          v-bind="level3"
                        />
                        <component
                          class="q-my-sm"
                          v-for="(level4, index) in level3.properties"
                          :key="index"
                          :is="componentMap[level4.type]"
                          v-model="dataForm[level4.name]"
                          v-bind="level4"
                        />
                      </div>
                    </component>
                  </div>
                  <component v-else :is="componentMap['arrayField']" />
                </div>
              </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.name]"
                  v-bind="level2"
                />
              </div>
              <component v-else :is="componentMap['arrayField']"> </component>
            </div>
          </component>
        </div>
      </component>
    </div>
  </div>
</template>
<script setup>
import { useComponentsMap } from './ComponentsMap.js';
import { useAttrs, onBeforeMount, reactive } from 'vue';
const { componentMap } = useComponentsMap();

// PROPERTIES
const attrs = useAttrs();
const dataForm = reactive({});

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

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

onBeforeMount(() => {
  console.log(attrs);
});
</script>
