<script setup>
import { ref } from "vue";
import { useResourceStore } from "@/stores/ResourceStore";
import { useI18n } from "vue-i18n";
import { successAlert, errorAlert } from "@/components/Mudur-Ui-Kit/alert.js";
import { useUiStore } from "@/stores/UiStore";
import Spinner from "./Partials/Spinner.vue";
import { storeToRefs } from "pinia";

const { t } = useI18n();
const { loading } = storeToRefs(useUiStore());
const { store } = useResourceStore();
const props = defineProps({
  orderId: {
    type: [String, Number],
    required: true,
  },
});

const enums = window.ginvoice.enums;

const wfStatusClass = (status) => {
  switch (status) {
    case "processing":
      return "!text-blue-600 !bg-blue-200";
    case "completed":
      return "!text-green-600 !bg-green-200";
    case "failed":
      return "!text-red-600 !bg-red-200";
  }
};

const formalStatusClass = (status) => {
  switch (status) {
    case "pending":
      return "!text-yellow-600 !bg-yellow-200";
    case "running":
      return "!text-blue-600 !bg-blue-200";
    case "completed":
      return "!text-green-600 !bg-green-200";
    case "not_required":
      return "!text-green-600 !bg-green-200";
    case "failed":
      return "!text-red-600 !bg-red-200";
    case "canceled":
      return "!text-gray-600 !bg-gray-200";
  }
};

const request = ref(window?.ginvoice?.requests[props.orderId]);
const invoice = ref(window?.ginvoice?.invoices[props.orderId]);

const create = async () => {
  try {
    const { data } = await store({
      data: {
        resource: "invoice",
        data: request.value,
      },
    });

    invoice.value = data;
    successAlert({ message: t("resource_added", [t("invoice")]) });
  } catch (e) {
    errorAlert({ message: e.responseJSON.error_message });
  }
};
</script>
<template>
  <button v-if="!invoice" class="button" type="button" @click="create">
    <Spinner v-show="loading" class="w-4 h-4" />
    <span v-show="!loading">Fatura Oluştur</span>
  </button>
  <template v-else>
    <div
      v-if="
        invoice.formal_status === 'not_required' ||
        invoice.workflow_status !== 'completed'
      "
      :class="`text-xs px-2 py-1 flex items-center justify-center gap-1 box-border rounded-full w-fit border ${wfStatusClass(invoice.workflow_status)}`"
    >
      Taslak Aktarımı
      {{ enums.invoice_workflow_statuses[invoice.workflow_status] }}
    </div>

    <div
      v-if="
        invoice.workflow_status === 'completed' &&
        invoice.formal_status !== 'not_required' &&
        !invoice.pdf_url
      "
      :class="`text-xs px-2 py-1 flex items-center justify-center gap-1 box-border rounded-full w-fit border ${formalStatusClass(invoice.formal_status)}`"
    >
      Resmileştirme
      {{ enums.invoice_formal_statuses[invoice.formal_status] }}
    </div>

    <a
      v-if="invoice.pdf_url"
      :href="invoice.pdf_url"
      target="_blank"
      rel="noopener noreferrer"
      class="text-xs px-2 py-1 flex items-center justify-center gap-1 box-border rounded-full w-fit border hover:border-green-600 cursor-pointer !text-green-600 !bg-green-200"
    >
      <arrow-top-right-on-square-icon class="w-3 h-3" />
      {{ invoice.serial_number }}</a
    >
  </template>
</template>
