<script setup>
import ButtonGroup from "@/components/customUI/ButtonGroup.vue";
import Account from "./components/Account.vue";
import Role from "./components/Role.vue";
import { computed, watch, onBeforeMount, markRaw } from "vue";
import useActiveBtn from "@/hooks/useActiveBtn";
import { useI18n } from "vue-i18n";
const { t, locale } = useI18n();
const changeComponent = (e, item) => {
  changeActiveBtn(item);
};

const { items, changeActiveBtn, setItems } = useActiveBtn();

const initializeItems = () => {
  setItems([
    {
      title: t("accountManagement.account_title"),
      key: "account",
      active: true,
      component: markRaw(Account),
    },
    {
      title: t("accountManagement.role_title"),
      key: "role",
      active: false,
       component: markRaw(Role),
    },
  ]);
};

onBeforeMount(() => {
  initializeItems();
});

watch(locale, () => {
  initializeItems();
});

const activeTab = computed(() => {
  return items.value.find(({ active }) => active);
});
</script>

<template>
  <h1 class="text-2xl font-extrabold mb-2">
    {{ $t("accountManagement.account_title") }}
  </h1>
  <ButtonGroup
    :items="items"
    :withLine="true"
    class="my-6"
    :onclick="changeComponent"
  />
  <component :is="activeTab.component"></component>
</template>

<style lang="scss" scoped></style>
