<template>
  <div>
    <q-card class="bg-blue-grey-1">
      <q-card-section>
        <p class="text-accent text-weight-bolder text-overline text-uppercase">
          One-Of
        </p>
        <q-select
          class="q-mb-lg"
          outlined
          v-model="value"
          dense
          :options="attrs.oneOf"
          :option-label="(item) => (item === null ? 'Null value' : item.title)"
          emit-value
          map-options
        />
        <q-card>
          <q-card-section>
            <div v-if="'keyPolicy' in value.properties">
              <component
                class="q-my-sm"
                v-for="(root, index) in value.properties.keyPolicy.items
                  .properties"
                :key="index"
                :is="componentMap[root.type]"
                v-model="dataForm[root.name]"
                v-bind="root"
              >
                <div v-if="root.type == 'array'">
                  <component
                    class="q-my-sm"
                    v-for="(level1, index) in root.items.properties"
                    :key="index"
                    :is="componentMap[level1.type]"
                    v-model="dataForm[level1.name]"
                    v-bind="level1"
                  >
                    <div v-if="level1.type == 'object'">
                      <div
                        v-if="
                          level1.items.properties != null ||
                          level1.items.properties != ''
                        "
                      >
                        <component
                          v-if="isOneOf(level1)"
                          class="q-my-sm"
                          :is="componentMap['oneOf']"
                          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"
                        >
                        </component>
                      </div>
                    </div>
                    <div v-if="level1.type == 'array'">
                      <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 v-if="level2.type == 'object'">
                          <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>
                      </component>
                    </div>
                  </component>
                </div>
              </component>
            </div>
            <div v-else>
              <component
                class="q-my-sm"
                v-for="(root, index) in value.properties"
                :key="index"
                :is="componentMap[root.type]"
                v-model="dataForm[root.name]"
                v-bind="root"
              >
                <div v-if="root.type == 'array'">
                  <component
                    class="q-my-sm"
                    v-for="(level1, index) in root.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-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"
                      >
                      </component>
                    </div>
                    <div v-if="level1.type == 'array'">
                      <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 v-if="level2.type == 'object'">
                          <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>
                      </component>
                    </div>
                  </component>
                </div>
              </component>
            </div>
          </q-card-section>
        </q-card>
      </q-card-section>
    </q-card>
  </div>
</template>

<script setup>
import { useComponentsMap } from './ComponentsMap.js';
import { useAttrs, ref, reactive, onBeforeMount } from 'vue';
import {QCard, QCardSection, QSelect} from 'quasar'

const { componentMap } = useComponentsMap();
const value = ref();
const attrs = useAttrs();
const dataForm = reactive({});

onBeforeMount(() => {
  value.value = attrs.oneOf[0];
});
</script>
