<script setup>
import ReturnedInfoModal from "@/components/ReturnedInfoModal.vue";
import BarcodeModal from "@/components/BarcodeModal.vue";
import { useResourceStore } from "@/stores/ResourceStore";
import { useApiRequestStore } from "@/stores/ApiRequestStore";
import { storeToRefs } from "pinia";
import { successAlert, confirmAlert } from "@/components/Mudur-Ui-Kit/alert.js";
import { useI18n } from "vue-i18n";
import { ref, onMounted } from "vue";

const { t } = useI18n();
const { returneds } = storeToRefs(useResourceStore());
const { destroy } = useResourceStore();
const { getPdf } = useApiRequestStore();
const modals = ref([]);
const pdfUrlModal = ref(false);
const pdfUrl = ref();

const printPdf = async (id) => {
  pdfUrl.value = await getPdf({
    data: { returneds: [id] },
    type: "returned",
  });
  pdfUrlModal.value = true;
};

onMounted(() => {
  returneds.value.forEach((returned) => {
    modals.value[returned.id] = false;
  });
});

const cancelReturn = async (id) => {
  confirmAlert({
    title: t("cancel_title"),
    message: t("cancel_returned"),
    onConfirm: async () => {
      await destroy({
        data: {
          resource: "returneds",
          id,
        },
      });
      successAlert({ title: t("resource_deleted", [t("returned")]) });
      window.location.reload();
    },
  });
};

const status = {
  non_processed: "İadeye Hazır",
  shipped: "Yola Çıktı",
  on_transit: "Taşıma Sürecinde",
  at_delivery_center: "Dağıtım Merkezinde",
  in_courier: "Dağıtıma Çıktı",
  delivered: "Teslim Edildi",
};
</script>

<template>
  <div
    v-for="returned in returneds"
    :key="returned.id"
    class="flex flex-col gap-4 py-4"
  >
    <div class="flex gap-4 items-center w-full">
      <img :src="returned.cargo_company.logo" class="object-contan w-16" />
      <div class="flex flex-col gap-1 w-full">
        <span
          v-if="status[returned.status]"
          class="bg-gray-100 text-gray-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded"
        >
          {{ status[returned.status] }}
        </span>
        {{ returned.cargo_company.title }} ile iade edildi
        <span class="font-bold">
          <time-format :date="returned.created_at" />
        </span>
      </div>
    </div>

    <BarcodeModal v-model="pdfUrlModal" :pdf-url="pdfUrl" />

    <div class="flex gap-4 cursor-pointer justify-between">
      <div class="col-span-2 flex flex-col text-xs">
        <span class="font-bold">{{ $t("tracking_number") }}</span>
        <a
          v-if="returned.tracking_number"
          :href="returned.tracking_link"
          target="_blank"
          class="text-primary-600 underline text-xs"
        >
          {{ returned.tracking_number }}
        </a>
        <span v-else class="text-xs">
          {{ $t("not_yet_formed") }}
        </span>
      </div>

      <div class="flex items-center justify-end gap-4">
        <div
          class="flex items-center justify-center rounded-full size-8 py-2 border text-primary-600 border-primary-600"
          @click="modals[returned.id] = !modals[returned.id]"
        >
          <information-circle-icon class="size-5" />
        </div>

        <div
          v-if="returned.status === 'non_processed'"
          class="flex items-center justify-center rounded-full size-8 py-2 border text-primary-600 border-primary-600"
          @click="printPdf(returned.id)"
        >
          <printer-icon class="size-5" />
        </div>

        <button
          v-if="returned.status === 'non_processed'"
          type="button"
          class="flex items-center justify-center rounded-full size-8 py-2 border text-red-600 border-red-600"
          @click="cancelReturn(returned.id)"
        >
          <arrow-uturn-left-icon class="w-5" />
        </button>
      </div>
    </div>

    <ReturnedInfoModal v-model="modals[returned.id]" :returned="returned" />
  </div>
</template>
