<script setup>
import { useDialogPluginComponent } from "quasar";
const props = defineProps({
  // ...your custom props
});
function onOKClick(value) {
  value.fields.forEach((field) => {
    field.nullable = field.nullable ? true : false;
  });
  onDialogOK(value);
}
defineEmits([
  // REQUIRED; need to specify some events that your
  // component will emit through useDialogPluginComponent()
  ...useDialogPluginComponent.emits
]);
const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent();
const types = ["varchar", "int", "date", "time", "datetime", "timestamp", "text", "blob", "json", "jsonb", "uuid", "boolean", "decimal", "float", "double", "real", "numeric", "smallint", "bigint", "tinyint", "mediumint", "char", "binary", "varbinary", "enum"];
</script>

<template>
    <q-dialog ref="dialogRef" full-width>
        <Suspense>
            <template #default>
                <q-card class="q-dialog-plugin">
                    <q-toolbar>
                        <q-toolbar-title>Create Table</q-toolbar-title>
                        <q-space />
                        <q-btn dense flat icon="sym_o_close" v-close-popup />
                    </q-toolbar>
                    <form-kit type="l-form" :bordered="false" @submit="onOKClick" :value="{
                        name: '',
                        fields: [],
                    }" :action="false" #default="{ value }">

                        <form-kit type="l-input" name="name" label="Name" validation="required" />

                        <form-kit type="l-repeater" name="fields">
                            <div class="row q-gutter-sm">
                                <form-kit type="l-input" name="name" label="Name" validation="required" class="col"
                                    dense />

                                <form-kit type="l-select" name="type" label="Type" :options="types"
                                    validation="required" class="col" dense />
                                <form-kit type="l-input" name="length" label="Length" class="col" number dense />
                                <form-kit type="l-input" name="default" label="Default" class="col" dense />
                                <form-kit type="l-checkbox" name="nullable" label="Nullable" />
                            </div>
                        </form-kit>

                    </form-kit>

                </q-card>
            </template>
            <template #fallback>
                <div class="q-pa-lg flex flex-center">
                    <q-spinner-dots color="primary" size="40px" />
                    <div class="q-ml-sm">Loading...</div>
                </div>
            </template>
        </Suspense>
    </q-dialog>
</template>
