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

import { ref, provide, onBeforeMount } from 'vue'
import { JsonForms } from '@jsonforms/vue'

import {
  vuetifyRenderers,
  defaultStyles,
  mergeStyles,
} from '@jsonforms/vue-vuetify'

const renderers = Object.freeze([
  ...vuetifyRenderers,
  // here you can add custom renderers
])

var uischema = useFetch('/api/forms/example/uischema').data
var schema = useFetch('/api/forms/example/schema').data

console.log(JSON.parse(schema.trim))

// onBeforeMount(async () => {
//   uischema = JSON.stringify(useFetch('/api/forms/example/uischema').data)
//   console.log(uischema)
//   // schema = JSON.stringify(useFetch('/api/forms/example/schema'))
//   // console.log(schema)
// })

const data = ref({
  name: 'Send email to Adrian',
  description: 'Confirm if you have passed the subject\nHereby ...',
  done: true,
  recurrence: 'Daily',
  rating: 3,
})

const onChange = (event: JsonFormsChangeEvent) => {
  data.value = event.data
}

// mergeStyles combines all classes from both styles definitions into one
const myStyles = mergeStyles(defaultStyles, { control: { label: 'mylabel' } })

// Provide styles to child components
provide('styles', myStyles)
</script>

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <h1>JSON Forms Vue 3</h1>
  <!-- <div class="myform">
    <json-forms
      :data="data"
      :renderers="renderers"
      :schema="schema"
      :uischema="uischema"
      @change="onChange"
    />
  </div> -->
  <pre>{{ data }}</pre>
  <pre>{{ typeof schema }}</pre>
  <pre>{{ schema }}</pre>
</template>
