<script setup>
import LineChart from "@/components/chart/LineChart.vue";
import { SECOND_CHART_COLOR } from "@/constant";
import { ref, watch, computed, onUnmounted } from "vue";
import useActiveBtn from "@/hooks/useActiveBtn";
import useSearchParams from "@/hooks/useSearchParam";
import useBuildingStore from "@/stores/useBuildingStore";
import { useI18n } from "vue-i18n";

const { t, locale } = useI18n();
const { searchParams } = useSearchParams();
const buildingStore = useBuildingStore();

// 狀態與按鈕邏輯
const timeoutTimer = ref("");
const { items, changeActiveBtn, setItems, selectedBtn } = useActiveBtn();
const currentOptionType = ref(1); // 1: 溫度, 2: 濕度
const noData = ref(true); // 目前顯示「無資料」

// 圖表參數預設（暫不使用）
const other_real_temp_chart = ref(null);
const defaultChartOption = ref({
  tooltip: {
    trigger: "axis",
  },
  legend: {
    data: [],
    textStyle: {
      color: "#ffffff",
      fontSize: 16,
    },
  },
  grid: {
    top: "10%",
    left: "0%",
    right: "0%",
    bottom: "0%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    splitLine: { show: false },
    axisLabel: { color: "#ffffff" },
    data: [],
  },
  yAxis: {
    type: "value",
    splitLine: { show: false },
    axisLabel: { color: "#ffffff" },
  },
  series: [],
});

// 按鈕名稱根據語系更新
const buttonItems = computed(() => [
  { key: 1, title: t("dashboard.temperature"), active: true },
  { key: 2, title: t("dashboard.humidity"), active: false },
]);

watch(
  () => locale.value,
  () => {
    setItems(buttonItems.value);
  },
  { immediate: true }
);

// 切換 tab（目前無實際資料行為）
watch(
  selectedBtn,
  (newValue) => {
    if (timeoutTimer.value) {
      clearInterval(timeoutTimer.value);
    }
    if (newValue?.key === 1 || newValue?.key === 2) {
      currentOptionType.value = newValue.key;
      // getData() 預留空間
    }
  },
  { immediate: true, deep: true }
);

// 清除計時器
onUnmounted(() => {
  if (timeoutTimer.value) {
    clearInterval(timeoutTimer.value);
  }
});
</script>

<template>
  <h3 class="text-info text-xl text-center">
    {{ $t("dashboard.refrig_chart") }}
  </h3>
  <div className="my-3 w-full flex justify-center relative">
    <ButtonConnectedGroup
      :items="items"
      :onclick="(e, item) => changeActiveBtn(item)"
    />
  </div>
  <div
    v-if="noData"
    class="text-center text-white text-lg min-h-[260px] flex items-center justify-center"
  >
  {{ $t("dashboard.no_data") }}
  </div>
</template>

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