<script setup>
import SettingsTab from "@/layouts/SettingsTab.vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();

import { storeToRefs } from "pinia";
import { useSettingsStore } from "@/stores/SettingsStore";
import MdrFormField from "@/components/Mudur-Ui-Kit/MdrFormField.vue";
import MdrToggle from "@/components/Mudur-Ui-Kit/MdrToggle.vue";
import PrimaryButton from "@/components/Buttons/PrimaryButton.vue";

const { updatePackageSetting } = useSettingsStore();
const { packageSetting } = storeToRefs(useSettingsStore());

const save = async () => {
  await updatePackageSetting({
    data: {
      data: packageSetting.value,
    },
  });
};
</script>
<template>
  <SettingsTab>
    <template #title>
      {{ $t("package_settings") }}
    </template>
    <template #description>
      {{ $t("package_settings_desc") }}
    </template>
    <div class="mt-6 space-y-4">
      <div class="space-y-4">
        <div class="flex items-center gap-4">
          <MdrToggle
            v-model="packageSetting.package_count_enabled"
            class="flex-shrink-0"
          >
          {{ $t('enable_package_count') }}

          </MdrToggle>
        </div>
        <div class="flex items-center gap-4">
          <span class="text-sm font-medium text-gray-700">{{ $t('package_count_desc_1') }}</span>
          <MdrFormField
            v-model="packageSetting.package_count"
            type="text"
            :disabled="!packageSetting.package_count_enabled"
            class="w-48"
          />
          <span class="text-sm font-medium text-gray-700">{{ $t('package_count_desc_2') }}</span>
        </div>
      </div>
    </div>
    <template #actions>
      <PrimaryButton @click="save">
        {{ $t("save") }}
      </PrimaryButton>
    </template>
  </SettingsTab>
</template>
