<script setup lang='ts'>
import type { FormKitSchemaDefinition } from '@formkit/core'
import type { PropType } from 'vue'
import { reset } from '@formkit/core'
import { FormKit, FormKitMessages, FormKitSchema } from '@formkit/vue'
import { ref, watch } from 'vue'
import FormKitDataDebug from './FormKitDataDebug.vue'

const props = defineProps({
  id: {
    type: String,
    default: 'formkit_form',
  },
  data: {
    type: Object,
    default: null,
  },
  schema: {
    type: Object as PropType<FormKitSchemaDefinition>,
    default: null,
  },
  formClass: {
    type: String,
    default: '',
  },
  actionsClass: {
    type: String,
    default: '',
  },
  submitSeverity: {
    type: String,
    default: '',
  },
  submitClass: {
    type: String,
    default: '',
  },
  submitLabel: {
    type: String,
    default: 'Save',
  },
  submitIcon: {
    type: String,
    default: '',
  },
  showReset: {
    type: Boolean,
    default: false,
  },
  resetSeverity: {
    type: String,
    default: 'danger',
  },
  resetLabel: {
    type: String,
    default: 'Reset',
  },
  resetClass: {
    type: String,
    default: '',
  },
  resetIcon: {
    type: String,
    default: '',
  },
  debugData: {
    type: Boolean,
    default: false,
  },
  debugSchema: {
    type: Boolean,
    default: false,
  },
})
const emit = defineEmits(['dataSaved', 'onReset'])

const formData = defineModel<any>()

if (props.data) {
  formData.value = props.data
}

const formSchema = ref(props.schema)

// Watch for changes to props and update internal refs
watch(() => props.schema, (newSchema) => {
  formSchema.value = newSchema
}, { deep: true })

watch(() => props.data, (newData) => {
  if (newData && newData !== formData.value) {
    formData.value = newData
  }
}, { deep: true })

function handleSave() {
  emit('dataSaved', formData.value)
}

function handleReset() {
  reset(props.id)
  emit('onReset')
}
</script>

<template>
  <FormKit
    :id="id"
    v-model="formData"
    :actions-class="actionsClass"
    :form-class="`p-formkit-data-edit ${formClass}`"
    type="form"
    @submit="handleSave"
  >
    <template #default>
      <FormKitSchema v-if="formSchema" :schema="formSchema" :data="formData" />
      <slot />
      <FormKitDataDebug v-if="debugData" :data="formData" header="Debug Mode - Data" />
      <FormKitDataDebug v-if="debugSchema" :data="formSchema as object" header="Debug Mode - Schema" />
    </template>
    <template #messages>
      <slot name="messages">
        <FormKitMessages class="p-formkit-data-edit-messages" />
      </slot>
    </template>
    <template #submit>
      <slot name="submit">
        <Button :icon="submitIcon" type="submit" :label="submitLabel" :class="submitClass" :severity="submitSeverity" @submit="handleSave" />
        <Button v-if="showReset" type="reset" :icon="resetIcon" :label="resetLabel" :class="resetClass" :severity="resetSeverity" @click="handleReset" />
      </slot>
    </template>
  </FormKit>
</template>

<style scoped>

</style>
