<script setup>
import { useDialogPluginComponent, useQuasar } from "quasar";
import { m, q } from "#imports";
const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent();
defineProps({
  models: {
    type: Array,
    required: true
  }
});
const $q = useQuasar();
defineEmits([
  // REQUIRED; need to specify some events that your
  // component will emit through useDialogPluginComponent()
  ...useDialogPluginComponent.emits
]);
const types = [
  { label: "Text", value: "text" },
  { label: "Textarea", value: "textarea" },
  { label: "Select", value: "select" },
  { label: "Date", value: "date" },
  { label: "Time", value: "time" }
];
const onOKClick = async (value) => {
  try {
    await m("addCustomField", {
      data: value
    });
    $q.notify({
      icon: "sym_o_check",
      message: "Custom Field added successfully",
      color: "positive"
    });
    onDialogOK();
  } catch (e) {
    $q.notify({
      icon: "sym_o_warning",
      message: e.message,
      color: "negative"
    });
  }
};
</script>

<template>
    <q-dialog ref="dialogRef">
        <q-card class="q-dialog-plugin">
            <q-toolbar>
                <q-toolbar-title>Add Custom Field</q-toolbar-title>
                <q-space />
                <q-btn dense flat icon="sym_o_close" v-close-popup />
            </q-toolbar>

            <form-kit type="l-form"
                :value="{ type: 'text', order: 1, options: [], default_value: '', placeholder: '', validation: '' }"
                #default="{ value, node }" @submit="onOKClick">
                <form-kit type="l-input" name="name" label="Name" validation="required" />

                <form-kit type="l-select" name="model" label="Model" :options="models" validation="required" />

                <form-kit type="l-select" name="type" label="Type" :options="types" validation="required" />

                <form-kit type="hidden" name="validation" />
                <l-validation-input v-model="value.validation" @update:model-value="node.at('validation').input($event)"
                    :type="value.type" />

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

                <form-kit type="hidden" name="options" />
                <template v-if="value.type === 'select'">
                    <form-kit type="l-select" label="Options" name="options" use-input use-chips multiple
                        hide-dropdown-icon input-debounce="0" new-value-mode="add-unique" stack-label outlined
                        placeholder="Press enter to add new option" />
                </template>

                <form-kit type="l-input" name="default_value" label="Default Value" />

                <form-kit type="l-input" name="placeholder" label="Placeholder" />

                <form-kit type="l-input" input-type="number" name="order" label="Order" number />

            </form-kit>

        </q-card>
    </q-dialog>
</template>
