<script setup>
import { ref } from "vue";
import MdrTable from "@/components/Mudur-Ui-Kit/MdrTable.vue";
import MarketplaceForm from "./Marketplace/MarketplaceForm.vue";

const selectedSellerId = ref(null);

const sellers = window.gcargo.sellers;

const headers = [
  {
    title: "#",
    key: "ID",
    class: "text-xs",
  },
  {
    title: "Kullanıcı Adı",
    key: "user_login",
    class: "text-xs",
  },
  {
    title: "E-posta",
    key: "user_email",
    class: "text-xs",
  },
  {
    title: "Mağaza Adı",
    key: "store_name",
    class: "text-xs",
  },
  {
    title: "Adres",
    key: "address",
    class: "text-xs",
  },
  {
    title: "İl/İlçe",
    key: "location",
    class: "text-xs",
  },
  {
    title: "Telefon",
    key: "phone",
    class: "text-xs",
  },
  {
    title: "Durum",
    key: "seller_id",
    class: "text-xs",
  },
];

const processedSellers = sellers?.users?.map((seller) => ({
  ...seller,
  seller_id: seller.data.gcargo_seller_id,
  user_login: seller.data.user_login,
  user_email: seller.data.user_email,
  store_name: seller.data.store_info.store_name,
  phone: seller.data.store_info.phone,
  address: seller.data.address.street_1,
  location: seller.data.address.state + " / " + seller.data.address.city,
}));

const handleTrClick = (item) => {
  if (item.seller_id) {
    return;
  }

  selectedSellerId.value = item.ID;
};

const handleFormClose = () => {
  selectedSellerId.value = null;
};
</script>

<template>
  <div>
    <MdrTable
      :items="processedSellers"
      :headers="headers"
      @tr-clicked="handleTrClick"
    >
      <template #seller_id="{ item }">
        <span v-if="item.seller_id">Kayıt Edildi</span>
        <span v-else>-</span>
      </template>
    </MdrTable>

    <MarketplaceForm
      v-if="selectedSellerId"
      :key="selectedSellerId"
      :seller-id="selectedSellerId"
      @close="handleFormClose"
    />
  </div>
</template>
