<script setup>
import SettingsTab from "@/layouts/SettingsTab.vue";
import MdrSelect from "@/components/Mudur-Ui-Kit/MdrSelect.vue";
import MdrDivider from "@/components/Mudur-Ui-Kit/MdrDivider.vue";
import { shipmentSettingFields } from "@/utils/fields.js";
import { useI18n } from "vue-i18n";
const { t } = useI18n();

import { storeToRefs } from "pinia";
import { useSettingsStore } from "@/stores/SettingsStore";
const { updateShipmentSetting, updateReturnedSetting } = useSettingsStore();
const { shipmentSetting, returnedSetting } = storeToRefs(useSettingsStore());

const save = async () => {
  await updateShipmentSetting({
    data: {
      data: shipmentSetting.value,
    },
  });
};

const returnedSave = async () => {
  await updateReturnedSetting({
    data: {
      data: returnedSetting.value,
    },
  });
};
</script>
<template>
  <SettingsTab>
    <template #title>
      {{ $t("shipment") }}
    </template>
    <template #description>
      {{ $t("shipment_desc") }}
    </template>
    <div class="grid grid-cols-3 gap-4">
      <MdrSelect
        v-for="set in shipmentSettingFields(t)"
        :key="set.model"
        v-model="shipmentSetting[`${set.model}`]"
        :label="set.label"
        :options="set.options"
        value-key="value"
        text-key="text"
        @change="save"
      />
    </div>
  </SettingsTab>
  <MdrDivider />
  <SettingsTab>
    <template #title>
      {{ $t("returned") }}
    </template>
    <template #description>
      {{ $t("returned_desc") }}
    </template>
    <div class="grid grid-cols-3 gap-4">
      <MdrSelect
        v-for="set in shipmentSettingFields(t)"
        :key="set.model"
        v-model="returnedSetting[`${set.model}`]"
        :label="set.label"
        :options="set.options"
        value-key="value"
        text-key="text"
        @change="returnedSave"
      />
    </div>
  </SettingsTab>
</template>
