<script setup>
import SettingsTab from "@/layouts/SettingsTab.vue";
import MdrTable from "@/components/Mudur-Ui-Kit/MdrTable.vue";
import MdrBadge from "@/components/Mudur-Ui-Kit/MdrBadge.vue";
import PrimaryButton from "@/components/Buttons/PrimaryButton.vue";
import SecondaryButton from "@/components/Buttons/SecondaryButton.vue";
import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";

import { storeToRefs } from "pinia";
import { useResourceStore } from "@/stores/ResourceStore";
const { cargoIntegrations } = storeToRefs(useResourceStore());

// Kargo Entegrasyonu Ekleme ve Düzenleme butonları şimdilik deaktif edildi
// import AddModal from "@/pages/settings/Partials/CargoIntegrations/AddModal.vue";
// import EditModal from "@/pages/settings/Partials/CargoIntegrations/EditModal.vue";
// import { ref } from "vue";
// const { show } = useResourceStore();
// const editModal = ref(false);

// const openEditModal = async (item) => {
//   cargoIntegration.value = await show({
//     data: { id: item.id, resource: "cargo_integrations" },
//   });
//   editModal.value = true;
// };
</script>

<template>
  <SettingsTab>
    <template #title>
      <div class="flex justify-between items-end">
        {{ $t("cargo_integrations") }}
        <!-- <AddModal @integration-added="editModal = !editModal" /> -->
        <div class="flex gap-2 items-center">
          <SecondaryButton
            link="https://yardim.gurmehub.com/docs/kargo-entegrator/woocommerce-eklentisi/kargo-entegrasyonu-ekleyin/"
            target="_blank"
          >
            {{ $t("how_add_shipping_account") }}</SecondaryButton
          >
          <PrimaryButton
            target="_blank"
            link="https://app.kargoentegrator.com/integration/cargo"
            class="gap-2"
            >{{ $t("add_new_cargo_account") }}
            <ArrowTopRightOnSquareIcon
              class="w-4 h-4"
            ></ArrowTopRightOnSquareIcon
          ></PrimaryButton>
        </div>
      </div>
    </template>
    <template #description>
      {{ $t("cargo_integrations_top", ["Kargo Entegratör"]) }}
    </template>

    <MdrTable
      :not-found-text="$t('record_not_found', [$t('cargo_integration')])"
      :items="cargoIntegrations"
      :headers="[
        { title: 'Firma', key: 'company_id' },
        {
          title: 'Tarih',
          key: 'created_at',
        },
      ]"
    >
      <template #company_id="{ item }">
        <div class="flex items-center gap-2">
          <img :src="item.company_info.logo" class="max-h-12 object-contain" />
          <div class="flex gap-2 items-center">
            <span>{{ item.name }} </span>
            <MdrBadge
              v-if="item.is_default"
              class="!bg-green-200 !text-green-600"
              >Varsayılan</MdrBadge
            >
          </div>
        </div>
      </template>

      <template #created_at="{ item }">
        <time-format :date="item.created_at" />
      </template>
    </MdrTable>

    <!-- <EditModal v-model="editModal" /> -->
  </SettingsTab>
</template>
