<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
        v-if="autoShipmentSettings.active"
        class="w-full mt-8 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>
    <template #actions>
      <PrimaryButton class="max-w-fit mt-5" @click="handleUpdate">
        {{ $t("save") }}
      </PrimaryButton>
    </template>
  </SettingsTab>
</template>
