<script setup lang="ts">
definePageMeta({
  title: 'Menu1 Form',
  icon: 'mdi-animation',
})

const api_data = useFetch('/api/forms/basic/data')
const api_i18n = useFetch('/api/forms/basic/i18n')
const api_schema = useFetch('/api/forms/basic/schema')
const api_uischema = useFetch('/api/forms/basic/uischema')

// In Vue 3, markRaw is used directly without needing to import it from a specific package
// const renderers = markRaw([
//   ...extendedVuetifyRenderers,
//   // here you can add custom renderers
// ]);

// Using ref for reactive data in Vue 3
const data = ref(api_data) // You'll need to replace this with your actual data
const schema = ref(api_schema) // Replace with your actual schema
const uischema = ref(api_uischema) // Replace with your actual UI schema

// Event handlers are defined as functions in the setup
// const onChange = (event) => {
//   data.value = event.data;
// };

const demo = {
  properties: {
    firstName: {
      type: 'string',
      description: "The person's first name.",
    },
    lastName: {
      type: 'string',
      description: "The person's last name.",
    },
    age: {
      description: 'Age in years which must be equal to or greater than zero.',
      type: 'integer',
      minimum: 0,
    },
  },
}

var form = document.getElementById('vuetify-json-forms')
// form.setAttribute("schema", JSON.stringify(demo));

// type="module"
// src="https://cdn.jsdelivr.net/npm/@chobantonov/jsonforms-vuetify-webcomponent@3.5.1/dist/vuetify-json-forms.min.js"
</script>

<template>
  <vuetify-json-forms id="vuetify-json-forms"></vuetify-json-forms>
  <v-container fluid> {{ data.data }} </v-container>
  <v-container fluid> {{ api_i18n.data }} </v-container>
  <v-container fluid> {{ schema.data }} </v-container>
  <v-container fluid> {{ uischema.data }} </v-container>
</template>
