<script setup>
import SettingsTab from "@/layouts/SettingsTab.vue";
import MdrToggle from "@/components/Mudur-Ui-Kit/MdrToggle.vue";
import MdrSelect from "@/components/Mudur-Ui-Kit/MdrSelect.vue";
import PrimaryButton from "@/components/Buttons/PrimaryButton.vue";

import { storeToRefs } from "pinia";
import { useSettingsStore } from "@/stores/SettingsStore";

const { updateAutoInvoiceSetting } = useSettingsStore();
const { autoInvoiceSettings } = storeToRefs(useSettingsStore());

const orderStatus = window.ginvoice.auto_invoice_statuses;
const invoiceGenerationTime = window.ginvoice.auto_invoice_timeouts;

const handleUpdate = () => {
  updateAutoInvoiceSetting(autoInvoiceSettings.value);
};
</script>

<template>
  <SettingsTab>
    <template #title>
      <div>{{ $t("auto_invoice_title") }}</div>
    </template>
    <template #description>
      {{ $t("auto_invoice_desc") }}
    </template>
    <div class="flex flex-col gap-4">
      <MdrToggle
        id="auto_invoice_enabled"
        v-model="autoInvoiceSettings.active"
        description="Otomatik fatura oluşturma seçeneklerini aktif etmek için aktif ediniz."
        >Aktif</MdrToggle
      >

      <div
        v-if="autoInvoiceSettings.active"
        class="w-full mt-8 flex gap-2 items-center"
      >
        {{ $t("order") }}
        <MdrSelect
          v-model="autoInvoiceSettings.status"
          :options="orderStatus"
          value-key="value"
          text-key="text"
          class="w-48"
        />
        {{ $t("order_passing") }}
        <MdrSelect
          v-model="autoInvoiceSettings.generation_time"
          :options="invoiceGenerationTime"
          value-key="value"
          text-key="text"
          class="w-48"
        />
        {{ $t("auto_generate") }}
      </div>
    </div>
    <template #actions>
      <PrimaryButton class="max-w-fit mt-5" @click="handleUpdate">
        {{ $t("save") }}
      </PrimaryButton>
    </template>
  </SettingsTab>
</template>
