<script setup>
import { useRouter, useRoute } from "vue-router";
import { useQuasar } from "quasar";
import { computed, model } from "#imports";
const route = useRoute();
const router = useRouter();
const $q = useQuasar();
let props = defineProps({
  context: {
    type: Object,
    required: true
  }
});
let onSubmit = async () => {
  props.context?.handlers.submit(new Event("submit"));
};
const gutter = props.context?.gutter ?? "md";
let bordered = true;
if (props.context.bordered !== void 0) {
  bordered = props.context.bordered;
}
let redirect = true;
if (props.context.attrs.onSubmitted) {
  redirect = false;
}
const modelName = props.context.modelName || (typeof route.name === "string" ? route.name.split("-")[0] : void 0);
const id = props.context.modelId || route.params[typeof route.name === "string" ? route.name.split("-")[1] : "id"];
if (!props.context.onSubmit) {
  props.context.node.props.onSubmit = async function() {
    const removeUndefined = (obj) => {
      if (obj === null || obj === void 0) {
        return obj;
      }
      if (obj instanceof File) {
        return obj;
      }
      if (Array.isArray(obj)) {
        return obj.map((item) => removeUndefined(item)).filter((item) => item !== void 0);
      }
      if (typeof obj === "object") {
        const result = {};
        for (const [key, value] of Object.entries(obj)) {
          const cleanedValue = removeUndefined(value);
          if (cleanedValue !== void 0) {
            result[key] = cleanedValue;
          }
        }
        return result;
      }
      return obj;
    };
    const v = removeUndefined(props.context.value);
    try {
      if (id) {
        if (await model(modelName).update(Number(id), v)) {
          $q.notify({
            message: "Updated successfully",
            color: "positive",
            icon: "sym_o_check"
          });
          if (redirect) {
            router.go(-1);
          }
        }
      } else {
        if (await model(modelName).add(v)) {
          $q.notify({
            message: "Added successfully",
            color: "positive",
            icon: "sym_o_check"
          });
          if (redirect) {
            router.go(-1);
          }
        }
      }
      if (props.context.attrs.onSubmitted) {
        props.context.attrs.onSubmitted(v);
      }
    } catch (e) {
      $q.dialog({
        title: "Error",
        message: e.message,
        ok: "OK"
      });
    }
  };
}
const isNoDirtyCheck = computed(() => {
  return props.context.attrs["no-dirty-check"] !== void 0;
});
const localClass = computed(() => {
  if (props.context.attrs.class) {
    return props.context.attrs.class;
  }
  return "row q-col-gutter-md";
});
</script>

<template>
    <l-card :bordered="bordered">
        <form @submit.prevent="onSubmit">
            <q-card-section :class="localClass">
                <slot v-bind="context"></slot>
            </q-card-section>
            <q-card-actions align="right" v-if="context.actions">
                <l-btn type="submit" icon="sym_o_check" :label="context.submitLabel ?? 'Submit'"
                    :disabled="!isNoDirtyCheck && !context.state.dirty" :loading="context.state.loading"></l-btn>
            </q-card-actions>
        </form>
    </l-card>
</template>
