<script setup>
import SettingsTab from "@/layouts/SettingsTab.vue";
import MdrToggle from "@/components/Mudur-Ui-Kit/MdrToggle.vue";
import PrimaryButton from "@/components/Buttons/PrimaryButton.vue";
import { storeToRefs } from "pinia";
import { useSettingsStore } from "@/stores/SettingsStore";

const { updateOtherSetting } = useSettingsStore();
const { otherSettings } = storeToRefs(useSettingsStore());

const handleUpdate = () => {
  updateOtherSetting({ admin_bar_menu: otherSettings.value.admin_bar_menu });
};
</script>

<template>
  <SettingsTab>
    <template #title> {{ $t("other_settings") }} </template>
    <template #description>
      {{ $t("other_settings_decs") }}
    </template>
    <div>
      <MdrToggle
        id="admin_menu_settings"
        v-model="otherSettings.admin_bar_menu"
        :description="$t('other_settings_toggle_desc')"
        >{{ $t("admin_menu-settings_title") }}</MdrToggle
      >
    </div>
    <template #actions>
      <PrimaryButton class="max-w-fit mt-5" @click="handleUpdate">
        {{ $t("save") }}
      </PrimaryButton>
    </template>
  </SettingsTab>
</template>
