<template>
    <div>
      <div v-for="item in fetchedData" :key="item.id" class="displayPosition mb-6">
        <div :class="['flex', 'items-center', 'w-full', 'max-w-xs', 'p-4', 'mb-4', 'text-gray-500', 'bg-white', 'rounded-lg', 'shadow', 'dark:text-gray-400', 'dark:bg-gray-800', { 'hidden': !item.isVisible }]" :id="`toast-${item.id}`" role="alert">
          <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-blue-700 bg-blue-100 rounded-full dark:bg-green-800 dark:text-blue-700">
            <svg width="40px" height="40px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="blinking-icon">
              <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
              <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
              <g id="SVGRepo_iconCarrier">
                <path d="M12 16H12.01M12 8V12M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#1d4ed8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </g>
            </svg>
          </div>
          <div class="ml-3 text-sm font-normal blinking-icon"><a target="_blank" :href="'/notice/'+item.slug" class="font-bold">{{ item.title }}</a></div>
          <button @click="toggleDisplay(item)" type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" :data-dismiss-target="`#toast-${item.id}`" aria-label="Close">
            <span class="sr-only">Close</span>
            <!-- Your close button icon here -->  
            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
            </svg>
          </button>
        </div>
      </div>
    </div>
</template>
<script>
  import Cookies from 'js-cookie';
  
  export default {
    data() {
      return {
        fetchedData: [],
      };
    },
    methods: {
      toggleDisplay(item) {
        item.isVisible = !item.isVisible;
        // Store the visibility state in a cookie
        Cookies.set(`toast-${item.id}-visible`, item.isVisible ? '1' : '0');
      },
      fetchData() {
        fetch('https://api8.siliconpin.com/items/scc22?filter[type][_eq]=notice&filter[position][_eq]=popup')
          .then((response) => response.json())
          .then((data) => {
            this.fetchedData = data.data.reverse().map((item) => ({
              ...item,
              isVisible: Cookies.get(`toast-${item.id}-visible`) === '1' || !Cookies.get(`toast-${item.id}-visible`) ? true : false,
            }));
            this.isLoading = false;
          });
      },
    },
    mounted() {
      this.fetchData();
    },
  };
</script>
  
  <style>
  .displayPosition {
    position: fixed;
    top: 50%;
  }
  @keyframes blink {
    0% {
      color: #1d4ed8;
    }
    25% {
      color: #FF0000;
    }
    50% {
      color: #1d4ed8;
    }
    100% {
      color: #FF0000;
    }
  }
  .blinking-icon {
    animation: blink 2s infinite;
    font-weight: bold;
  }
  .hidden {
    display: none;
  }
  </style>
  