<script setup>
import ButtonGroup from "@/components/customUI/ButtonGroup.vue";
import AlertQuery from "./components/AlertQuery/AlertQuery.vue";
import AlertSetting from "./components/AlertSetting/AlertSetting.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("alert.query_title"),
      key: "Query",
      active: true,
      component: markRaw(AlertQuery),
    },
    {
      title: t("alert.setting_title"),
      key: "Setting",
      active: false,
      component: markRaw(AlertSetting),
    },
  ]);
};

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

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

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

const activeTitle = computed(() => {
  return activeTab.value ? activeTab.value.title : '';
});
</script>

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

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