<script setup>
import Loading from "@/components/Loading.vue";
// import Status from "@/pages/admin-order-detail/Partials/Status.vue";
import Create from "@/pages/admin-order-detail/Partials/Create.vue";
import Info from "@/pages/admin-order-detail/Partials/Info.vue";
import { useSettingsStore } from "@/stores/SettingsStore";
import { useOrderStore } from "@/stores/OrderStore";
import { onBeforeMount, ref } from "vue";
import { initFlowbite } from "flowbite";
import ReturnedCreate from "@/pages/admin-order-detail/Partials/ReturnedCreate.vue";
import ReturnedStatus from "@/pages/admin-order-detail/Partials/ReturnedStatus.vue";
import ReturnedInfo from "@/pages/admin-order-detail/Partials/ReturnedInfo.vue";

const { shipmentStatus, returnedStatus } = useOrderStore();
const { apiKey, settingsUrl } = useSettingsStore();
const tab = ref("shipment");
onBeforeMount(() => {
  initFlowbite();
});
</script>
<template>
  <div v-if="apiKey" class="relative w-full">
    <Loading />
    <div class="flex w-full">
      <button
        type="button"
        :class="`w-1/2 border p-2 border-b-0 rounded-t ${tab === 'shipment' ? '' : 'bg-gray-200 text-[12px]'}`"
        @click="tab = 'shipment'"
      >
        {{ $t("shipment") }}
      </button>
      <button
        type="button"
        :class="`w-1/2 border p-2 border-b-0 rounded-t ${tab === 'returned' ? '' : 'bg-gray-200 text-[12px]'}`"
        @click="tab = 'returned'"
      >
        {{ $t("returned") }}
      </button>
    </div>
    <div class="border border-t-0 p-2">
      <template v-if="tab === 'shipment'">
        <!-- <Status /> 11.03.2025 güncellemesi ile birlikte Metabox üzerinde bulunan "Hepsi Gönderildi" gibi ibareler yazan status kısmı kaldırıldı. -->
        <Info />
        <Create v-if="shipmentStatus !== 'all_shipped'" />
      </template>
      <template v-else>
        <ReturnedStatus />
        <ReturnedInfo />
        <ReturnedCreate v-if="returnedStatus !== 'all_returned'" />
      </template>
    </div>
  </div>
  <div v-else class="bg-red-100 text-red-800 p-2 rounded-md">
    {{ $t("api_key_required") }}
    <a :href="settingsUrl" target="blank" class="underline">{{
      $t("connect")
    }}</a>
  </div>
</template>
