<script setup lang="ts">
type ConfirmDialogMode = {
  modelValue: boolean;
  title?: string;
  message?: string;

  confirmText?: string;
  cancelText?: string;

  confirmColor?: string;
  cancelColor?: string;

  persistent?: boolean;
  maxWidth?: number | string;

  loading?: boolean;

  // Kalau true: klik "Ya" langsung tutup.
  // Kalau false: parent yang nutup (cocok untuk async delete/update).
  closeOnConfirm?: boolean;
};

const props = withDefaults(defineProps<ConfirmDialogMode>(), {
  title: 'Konfirmasi',
  message: 'Apakah Anda yakin?',
  confirmText: 'Ya',
  cancelText: 'Tidak',
  confirmColor: 'success',
  cancelColor: 'error',
  persistent: true,
  maxWidth: 500,
  loading: false,
  closeOnConfirm: true,
});

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void;
  (e: 'confirm'): void;
  (e: 'cancel'): void;
}>();

const close = () => emit('update:modelValue', false);

const onCancel = () => {
  emit('cancel');
  close();
};

const onConfirm = () => {
  emit('confirm');
  if (props.closeOnConfirm) close();
};
</script>

<template>
  <v-dialog
    location="top"
    transition="dialog-top-transition"
    :model-value="props.modelValue"
    @update:model-value="emit('update:modelValue', $event)"
    :persistent="props.persistent"
    :max-width="props.maxWidth"
  >
    <v-card class="pa-6">
      <v-card-title class="text-h5">
        <slot name="title">{{ props.title }}</slot>
      </v-card-title>

      <v-card-text>
        <slot>{{ props.message }}</slot>
      </v-card-text>

      <v-card-actions>
        <v-spacer />
        <v-btn
          :color="props.cancelColor"
          variant="tonal"
          flat
          prepend-icon="mdi-cancel"
          :disabled="props.loading"
          @click="onCancel"
        >
          {{ props.cancelText }}
        </v-btn>

        <v-btn
          :color="props.confirmColor"
          variant="tonal"
          flat
          prepend-icon="mdi-check"
          :loading="props.loading"
          :disabled="props.loading"
          @click="onConfirm"
        >
          {{ props.confirmText }}
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>