<template>
  <div class="has-text-centered">
    <p class="">
      Bạn có chắc chắn muốn chuyển sản phẩm này sang trạng thái<br />
      <strong :class="newStatus === 2 ? 'has-text-success' : 'has-text-danger'">
        {{ newStatus === 2 ? "ĐANG BÁN" : "KHÓA" }}
      </strong>
      không?
    </p>

    <hr class="my-3" />

    <div class="field is-grouped is-grouped-centered">
      <div class="control">
        <button
          class="button"
          :class="newStatus === 2 ? 'is-success' : 'is-danger'"
          :disabled="isSaving"
          @click="confirmChange"
        >
          <span v-if="isSaving">Đang xử lý...</span>
          <span v-else>Đồng ý</span>
        </button>
      </div>

      <div class="control">
        <button
          class="button is-dark"
          :disabled="isSaving"
          @click="close"
        >
          Hủy bỏ
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useNuxtApp } from "#app";

const emit = defineEmits(["close", "modalevent"]);

const props = defineProps({
  product: {
    type: Object,
    required: true,
  },
});

const { $patchapi, $snackbar } = useNuxtApp();

const isSaving = ref(false);

const currentStatus = computed(() => Number(props.product?.status) || null);
const newStatus = computed(() => (currentStatus.value === 15 ? 2 : 15));

async function confirmChange() {
  if (!props.product?.id || newStatus.value === currentStatus.value) {
    close();
    return;
  }

  isSaving.value = true;

  try {
    const result = await $patchapi(
      "product",
      {
        id: props.product.id,
        status: newStatus.value,
      },
      {},
      false,
    );

    if (result === "error" || !result) {
      $snackbar("Cập nhật thất bại", "Lỗi", "Error");
      return;
    }

    $snackbar("Cập nhật trạng thái thành công", "Thành công", "Success");

    // Phát sự kiện để component cha (hoặc bảng) cập nhật lại dữ liệu
    emit("modalevent", {
      name: "update",
      data: {
        id: props.product.id,
        status: newStatus.value,
      },
    });

    close();
  } catch (error) {
    console.error("Lỗi đổi trạng thái:", error);
    $snackbar("Có lỗi xảy ra", "Lỗi", "Error");
  } finally {
    isSaving.value = false;
  }
}

function close() {
  emit("close");
}
</script>
