<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 { updateAutoShipmentSetting } = useSettingsStore();
const { autoShipmentSettings } = storeToRefs(useSettingsStore());

const orderStatus = window.gcargo.auto_shipment_statuses;
const shipmentGenerationTime = window.gcargo.auto_shipment_timeouts;

const handleUpdate = () => {
  updateAutoShipmentSetting(autoShipmentSettings.value);
};
</script>

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

      <MdrToggle
        v-if="autoShipmentSettings.active"
        id="fix_address_enabled"
        v-model="autoShipmentSettings.fix_address_enabled"
      >
        {{ $t("fix_address_desc") }}
        <template #description>
          <p class="ms-2 text-xs text-gray-500 max-w-md">
            Önemli: Adres bilgilerini yapay zeka (GPT) kullanarak otomatik
            olarak analiz eder, eksik veya hatalı kısımları düzeltir ve standart
            biçime getirir. Bu özellik, kullanıcı deneyimini iyileştirmeyi
            amaçlar ancak tüm adreslerin doğruluğunu garanti etmez. Ayarın
            etkinleştirilmesi, kullanıcı sorumluluğundadır. Lütfen düzenlenen
            adresleri gerekli durumlarda manuel olarak kontrol edin.
          </p>
        </template>
      </MdrToggle>

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