<script setup>
import { useDialogPluginComponent } from "quasar";
const props = defineProps({
  field: {
    type: Object,
    default: null
  }
});
defineEmits([...useDialogPluginComponent.emits]);
const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent();
function onOKClick(value) {
  onDialogOK(value);
}
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"];
const isEdit = !!props.field;
</script>

<template>
    <q-dialog ref="dialogRef">
        <q-card class="q-dialog-plugin">
            <q-toolbar>
                <q-toolbar-title>{{ isEdit ? 'Edit Field' : 'Add Field' }}</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: field?.name ?? '',
                type: field?.type ?? '',
                length: field?.length ?? '',
                default: field?.default ?? '',
                nullable: field?.nullable ?? false,
                autoincrement: field?.autoincrement ?? false
            }">
                <form-kit type="l-input" name="name" label="Name" validation="required" :disabled="isEdit" />
                <form-kit type="l-select" name="type" label="Type" :options="types" validation="required" />
                <form-kit type="l-input" name="length" label="Length" />
                <form-kit type="l-input" name="default" label="Default" />
                <form-kit type="l-checkbox" name="nullable" label="Nullable" />
                <form-kit type="l-checkbox" name="autoincrement" label="Auto increment" />
            </form-kit>
        </q-card>
    </q-dialog>
</template>
