<script setup>
import { onMounted, watch } from "vue";
import useActiveBtn from "@/hooks/useActiveBtn";
import useSearchParam from "@/hooks/useSearchParam";
import { useI18n } from "vue-i18n";
const { t, locale } = useI18n();
const { searchParams, changeParams } = useSearchParam();
const { 
  items,
  changeActiveBtn,
  setItems,
  selectedBtn
} = useActiveBtn();

const initializeItems = () => {
  setItems([
    {
      title: t("alert.unacked"),
      key: "unacked",
      active: true,
    },
    {
      title: t("alert.acked"),
      key: "acked",
      active: false,
    },
  ]);
};

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

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

watch(
  selectedBtn,
  (newValue) => {
    changeParams({ ...searchParams.value, isAck: newValue.key });
  },
);

// 監聽搜尋變化
watch(
  searchParams,
  (newSearchParams) => {
    if (!newSearchParams.isAck) {
      changeParams({ ...newSearchParams, isAck: "unacked" });
    }
  },
  { immediate: true } // 確保在初始化立即觸發
);
</script>

<template>
  <ButtonGroup :items="items" :withLine="true" class="mr-5" :onclick="(e, item) => {
    changeActiveBtn(item);
  }" />
</template>

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