<script setup>
import MdrModal from "@/components/Mudur-Ui-Kit/MdrModal.vue";
import { computed } from "vue";

const props = defineProps({
  modelValue: Boolean,
  returned: {
    type: Object,
    required: true,
  },
});

const emit = defineEmits(["update:modelValue"]);
const componentValue = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});

const copy = (text) => {
  if (text) {
    navigator.clipboard.writeText(text);
  }
};

const status = {
  non_processed: "İade Paketlendi",
  shipped: "Kargoya Teslim Edildi",
  on_transit: "Transfer Sürecinde",
  in_courier: "Teslimat Sürecinde",
  delivered: "Teslim Edildi",
};
</script>

<template>
  <MdrModal v-model="componentValue" size="size-1/3">
    <template #title>{{ $t("returned_details") }}</template>
    <div class="flex flex-col gap-6 px-4">
      <div
        class="flex justify-between items-center px-4 py-2 bg-primary-200 text-primary-800 rounded-lg"
      >
        <img :src="returned.cargo_company.logo" class="object-contan !h-6" />
        <a
          v-if="returned.tracking_number"
          :href="returned.tracking_link"
          target="_blank"
          class="underline text-xs"
        >
          {{ returned.tracking_number }}
        </a>

        <span v-else class="text-xs">
          {{ $t("not_yet_formed") }}
        </span>

        <clipboard-icon
          class="h-6 cursor-pointer"
          @click="copy(returned.tracking_number)"
        />
      </div>

      <template v-if="returned.lines.length > 0">
        <div
          v-for="line in returned.lines"
          :key="line.id"
          class="py-2 px-8 border border-gray-200 rounded-lg"
        >
          <div class="flex items-center gap-4">
            <div class="border border-gray-200 rounded-lg">
              <img
                :src="line.image"
                alt=""
                srcset=""
                class="!h-16 !w-16 object-cover rounded-lg"
              />
            </div>

            <div class="flex flex-col gap-2">
              <span class="font-semibold text-xl">
                {{ line.title }}
              </span>
              <div class="flex gap-2">
                <span v-if="line.sku">Sku: {{ line.platform_id }}</span>
                <span>{{ line.quantity }} Adet</span>
                <span class="text-gray-500"
                  >İade Nedeni: {{ line.reason }}</span
                >
              </div>
            </div>
          </div>
        </div>
      </template>

      <div class="flex flex-col gap-2">
        <span class="font-semibold text-lg">{{ $t("sender_address") }}</span>
        <span>{{
          `${returned.sender.address} ${returned.sender.district}/${returned.sender.city}`
        }}</span>
      </div>

      <div class="flex flex-col outline outline-1 outline-gray-200 rounded-lg">
        <div
          v-for="(step, index) in returned.steps"
          :key="index"
          :class="`${index % 2 === 0 ? 'bg-white' : 'bg-gray-100'} flex justify-between items-center px-4 py-2`"
        >
          <div class="flex flex-col gap-1 w-2/5">
            <span class="font-semibold text-lg">
              {{ status[step.status] }}
            </span>
            <time-format :date="step.created_at" />
          </div>

          <span class="text-primary-800 break-words w-3/5 text-right">
            {{ step.message }}
          </span>
        </div>
      </div>
    </div>
    <template #actions />
  </MdrModal>
</template>
