<script setup>
import { onMounted, ref } from "vue";
import AlarmCards from "./AlarmCards.vue";
import { twMerge } from "tailwind-merge";

const showErr = ref(false);
const toggleErrIcon = () => {
  console.log("Toggle");
  showErr.value = !showErr.value;
};
</script>

<template>
  <div class="drawer drawer-end">
    <input id="alarm" type="checkbox" class="drawer-toggle" />
    <div class="drawer-content">
      <!-- Page content here -->
      <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"> {{ $t("alarm.title") }}</span>
      </label>
    </div>
    <div
      :class="
        twMerge(
          'drawer-side translate-y-16 max-h-[95vh] overflow-x-hidden',
          showErr ? 'overflow-y-scroll' : ''
        )
      "
    >
      <AlarmCards />
    </div>
  </div>
</template>

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