<script setup>
import useActiveBtn from "@/hooks/useActiveBtn";
import { onMounted, watch } from "vue";
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.offnormal"),
      key: 1,
      active: true,
    },
    {
      title: t("alert.normal"),
      key: 2,
      active: false,
    },
  ]);
};

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

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

// 監聽按鈕變化
watch(
  selectedBtn,
  (newValue) => {
    changeParams({ ...searchParams.value, isRecovery: newValue.key });
  }
);

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

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

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