<script setup>
import { ref, computed } from "vue";
import { useNctCrudFetch, useNctFormState } from "#imports";
const props = defineProps({
  resource: { type: String, required: true },
  row: { type: Object, required: true },
  schema: { type: Object, required: true }
});
const state = computed(() => {
  if (!props.schema) return {};
  const filteredFields = props.schema.fields.filter(
    (field) => !["id", "created_at", "updated_at", "deleted_at", "createdAt", "updatedAt", "deletedAt"].includes(field.name)
  );
  return useNctFormState(filteredFields, props.row);
});
const open = ref(false);
const loading = ref(false);
async function onSubmit(data) {
  loading.value = true;
  try {
    await useNctCrudFetch("PATCH", props.resource, props.row.id, data);
    open.value = false;
  } finally {
    loading.value = false;
  }
}
</script>

<template>
  <UModal v-model:open="open">
    <UButton
      label="Edit"
      color="primary"
      variant="outline"
      class="font-medium"
    />

    <!-- Modal content -->
    <template #content>
      <div class="max-w-md p-6 rounded-lg shadow-lg space-y-4">
        <h2 class="text-lg font-semibold mb-2">
          Edit {{ resource }}
        </h2>
        <hr>

        <!-- Form -->
        <NctCrudForm
          v-if="schema"
          :schema="schema"
          :initial-state="state"
          :loading="loading"
          @submit="onSubmit"
        />

        <!-- Fallback -->
        <p
          v-else
          class="text-sm text-red-500"
        >
          No schema provided for {{ resource }}
        </p>
      </div>
    </template>
  </UModal>
</template>
