<script setup>
import { computed, useTemplateRef } from "vue";
import { useGraphqlModelItem } from "../../composables/graphqlModelItem";
import { useApiModelItem } from "../../composables/apiModelItem";
import EditPad from "../form/EditPad.vue";
import { useDialog } from "../../composables/dialog";
defineOptions({
  inheritAttrs: false
});
const props = defineProps({
  title: { type: String, required: false },
  saveCaption: { type: String, required: false, default: "\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01" },
  cancelCaption: { type: String, required: false, default: "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01" },
  api: { type: Boolean, required: false, default: false },
  modelName: { type: String, required: true },
  modelKey: { type: String, required: false },
  modelBy: { type: Object, required: false },
  operationCreate: { type: [Object, String], required: false },
  operationUpdate: { type: [Object, String], required: false },
  operationDelete: { type: [Object, String], required: false },
  operationRead: { type: [Object, String], required: false },
  fields: { type: Array, required: false, default: () => ["*"] }
});
const emit = defineEmits(["create", "update"]);
const {
  item,
  canCreate,
  canUpdate,
  createItem,
  updateItem,
  reload,
  isLoading
} = props.api ? useApiModelItem(props) : useGraphqlModelItem(props);
const editPad = useTemplateRef("editPadRef");
const canSave = computed(() => {
  return canCreate.value && editPad.value?.operation?.isCreating?.value || canUpdate.value;
});
const operation = computed(() => {
  return Object.assign({}, editPad.value?.operation, { canSave, reload, item });
});
const onCreateItem = (item2, callback) => {
  createItem(item2, callback).then(() => {
    useDialog().notify({ message: "Data created successfully", type: "success", title: "Success" });
    emit("create", item2, callback);
  });
};
const onUpdateItem = (item2, callback) => {
  updateItem(item2, callback).then(() => {
    useDialog().notify({ message: "Data updated successfully", type: "success", title: "Success" });
    emit("update", item2, callback);
  });
};
defineExpose({ operation, formPad: editPad.value?.formPad });
</script>

<template>
  <FormEditPad v-bind="$attrs" :form-data="item" ref="editPadRef" @create="onCreateItem" @update="onUpdateItem">
    <template #titleToolbar>
      <slot name="titleToolbar" :operation="operation">
        <VToolbarTitle>
          <slot name="title" :operation="operation">
            {{ title }}
            <v-icon
                size="small"
                @click="reload"
            >
              mdi mdi-refresh
            </v-icon>
          </slot>
        </VToolbarTitle>
      </slot>
    </template>
    <template #action="slotData">
      <slot name="action" :operation="operation">
        <VSpacer />
        <VBtn
            color="primary"
            variant="flat"
            :loading="isLoading"
            :disabled="!slotData.operation?.isDataChange || !canSave"
            @click="slotData.operation?.save"
        >
          {{ props.saveCaption }}
        </VBtn>
        <VBtn
            color="error"
            variant="flat"
            :disabled="isLoading"
            @click="slotData.operation?.cancel"
        >
          {{ props.cancelCaption }}
        </VBtn>
      </slot>
    </template>
    <template #default="slotData">
      <slot
          v-bind="slotData"
      />
    </template>
  </FormEditPad>
</template>
