<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 { invoiceIntegrations } = storeToRefs(useResourceStore());
</script>

<template>
  <SettingsTab>
    <template #title>
      <div class="flex justify-between items-end">
        {{ $t("invoice_integrations") }}
        <div class="flex gap-2 items-center">
          <SecondaryButton
            link="https://yardim.gurmehub.com/docs/fatura-entegrator/ilk-kurulum/"
            target="_blank"
          >
            {{ $t("how_add_invoice_integration") }}</SecondaryButton
          >
          <PrimaryButton
            target="_blank"
            link="https://app.faturaentegrator.com/settings/integration/invoice"
            class="gap-2"
            >{{ $t("add_new_invoice_integration") }}
            <ArrowTopRightOnSquareIcon
              class="w-4 h-4"
            ></ArrowTopRightOnSquareIcon
          ></PrimaryButton>
        </div>
      </div>
    </template>
    <template #description>
      {{ $t("invoice_integrations_top", ["Fatura Entegratör"]) }}
    </template>

    <MdrTable
      :not-found-text="$t('record_not_found', [$t('invoice_integrations')])"
      :items="invoiceIntegrations"
      :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.base.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>
