<script setup>
import { ref, computed, onMounted } from "vue";
import AlarmCards from "./AlarmCards.vue";
import useAlarmStore from "@/stores/useAlarmStore";
import { getShowAlarm } from "@/apis/alert";

const showAlarmData = ref([]);
const showErr = ref(false);
const alarms = ref([]);
const store = useAlarmStore();

const fetchAlarmData = async () => {
  const res = await getShowAlarm();
  showAlarmData.value = res.data;

  const showAlarmSet = new Set(showAlarmData.value);
  alarms.value = store.alarmData.filter((alarm) =>
    showAlarmSet.has(alarm.sourceName)
  );
};

const toggleErrIcon = async () => {
  console.log("Toggle");

  showErr.value = !showErr.value;
   if (showErr.value) {
    await fetchAlarmData();
  }
};

onMounted(() => {
  store.getAlarmDataFromBaja();
});
</script>

<template>
  <div class="drawer drawer-end">
    <input id="alarm" type="checkbox" class="drawer-toggle" />
    <div class="drawer-content">
      <label
        for="alarm"
        class="drawer-button flex flex-col justify-center items-center btn-group"
        @click="toggleErrIcon"
      >
        <font-awesome-icon
          v-if="!showErr"
          :icon="['fas', 'comment-dots']"
          size="2x"
          class="text-white menu-icon"
        />
        <font-awesome-icon
          v-else
          :icon="['fas', 'comment-slash']"
          size="2x"
          class="text-white menu-icon"
        />
        <span class="text-white"> 顯示警告</span>
      </label>
    </div>
    <div class="drawer-side translate-y-16 max-h-[95vh] overflow-y-scroll overflow-x-hidden">
      <AlarmCards :alarms="alarms" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.drawer-toggle,
.drawer-button {
  outline: none !important;
  outline-offset: 0 !important;
  border: 0 !important;
}
</style>
