<script setup>
import SettingsTab from "@/layouts/SettingsTab.vue";
import MdrTable from "@/components/Mudur-Ui-Kit/MdrTable.vue";
import MdrFormField from "@/components/Mudur-Ui-Kit/MdrFormField.vue";
import PrimaryButton from "@/components/Buttons/PrimaryButton.vue";
import { storeToRefs } from "pinia";
import { ref } from "vue";
import { useSettingsStore } from "@/stores/SettingsStore";
const { updateLineExcludes } = useSettingsStore();
const { lineExcludes } = storeToRefs(useSettingsStore());

const exclude = ref("");

const addExcludeLine = async () => {
  const value = exclude.value.trim();

  if (!value) return;

  if (lineExcludes.value.some((item) => item.includes(value))) return;

  await lineExcludes.value.push(exclude.value);
  exclude.value = "";

  updateLineExcludes();
};

const remove = async (index) => {
  await lineExcludes.value.splice(index, 1);
  updateLineExcludes();
};
</script>

<template>
  <SettingsTab>
    <template #title> Satır Dışlamaları</template>
    <template #description>
      Fatura Entegratör'ün siparişinizde tespit ettiği ürün, ek ücretler,
      gönderim bedellerini bu ayar ile faturaya eklememesini sağlayabilirsiniz.
    </template>
    <div class="flex w-1/2 flex-col gap-2 p-2">
      <div class="flex gap-2 items-end">
        <MdrFormField
          v-model="exclude"
          class="w-full"
          label="Dışlanacak satır adı"
          dense
        />
        <PrimaryButton @click="addExcludeLine">Ekle</PrimaryButton>
      </div>
      <MdrTable
        no-data-text="Dışlanacak edilecek satır yok"
        :items="lineExcludes.map((e) => ({ title: e }))"
        :headers="[
          { title: 'Satır Adı', key: 'title', class: '!w-4/6' },
          { title: 'Kaldır', key: 'remove' },
        ]"
        class="mt-auto"
      >
        <template #remove="{ index }">
          <button class="text-red-600" @click="remove(index)">Kaldır</button>
        </template>
      </MdrTable>
    </div>
  </SettingsTab>
</template>
