<script setup>
const props = defineProps({
  isDeleteDialogVisible: {
    type: Boolean,
    required: true,
  },
  permissionId: {
    type: Number,
    required: false,
    default: 0,
  },
  permissionName: {
    type: String,
    required: false,
    default: "",
  },
});

const emit = defineEmits([
  "update:isDeleteDialogVisible",
  "update:permissionName",
]);

const currentPermissionName = ref("");

const onReset = () => {
  emit("update:isDeleteDialogVisible", false);
  currentPermissionName.value = "";
};

const deletePermission = async () => {
  try {
    await $api(`/account-panel/permissions/${props.permissionId}`, {
      method: "post",
      body: {
        _method: "delete",
      },
    });

    emit("update:isDeleteDialogVisible", false);
    emit("permission-updated");
  } catch (error) {
    console.error(error);
  }
};

watch(props, () => {
  currentPermissionName.value = props.permissionName;
});
</script>

<template>
  <VDialog
    :model-value="props.isDeleteDialogVisible"
    class="v-dialog-lg"
    persistent
  >
    <!-- Dialog close btn -->
    <DialogCloseBtn @click="onReset" />

    <!-- Dialog Content -->
    <VCard>
      <VCardItem class="pb-5">
        <VCardTitle>刪除 {{ props.permissionName }}</VCardTitle>
      </VCardItem>

      <VDivider />

      <VCardText>
        你確定要刪除
        <a class="text-error">{{ props.permissionName }}</a>
        這個權限嗎？這個操作是不可逆的
      </VCardText>

      <VDivider />

      <VCardText class="d-flex justify-end flex-wrap gap-3 pt-5">
        <VBtn color="secondary" variant="tonal" @click="onReset"> 取消 </VBtn>
        <VBtn color="error" @click="deletePermission(props.permissionId)">
          刪除
        </VBtn>
      </VCardText>
    </VCard>
  </VDialog>
</template>
