<template>

    <!-- Filter Button -->
    <button @click="toggleFilterPanel" class="text-xs absolute right-1 top-1/2 transform -translate-y-1/2 p-2 bg-white border border-1 border-gray-300 hover:bg-gray-100 dark:bg-gray-100 dark:hover:bg-gray-200">
        Filter &amp; Sort <font-awesome-icon icon="sliders" size="lg" class="ms-3" />
    </button>

    <!-- Filter Panel -->
    <div ref="filterPanel" :class="['fixed inset-y-0 right-0 z-40 w-4/5 lg:w-3/5 overflow-y-auto bg-white dark:bg-gray-100 border-l border-gray-200 dark:border-gray-200 shadow-lg transition-transform', showFilterPanel ? 'translate-x-0' : 'translate-x-full']">
        <div class="p-4">
        <h2 class="text-xl font-semibold mb-4">Filter &amp; Sort</h2>
        <hr /><br />
        <!-- Add your filter content here -->
        <button @click="showFilterPanel = false" class="absolute top-2 right-4 p-2 text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
            <font-awesome-icon icon="times" size="2x" />
        </button>

        <br />
        <h2 class="text-xl font-semibold mb-4">Applied Filters</h2>
        <div class="flex flex-wrap gap-2">
          <FBWTagComponent v-for="tag in tags" :key="tag" :text="tag" />
        </div>

        <br /><br />


        <div id="accordion-open" data-accordion="open">
          <!-- Sort By Section -->
          <h2 id="accordion-open-heading-1">
            <button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right border-b text-gray-500 focus:ring-4 hover:bg-gray-100 gap-3" data-accordion-target="#accordion-open-body-1" aria-expanded="true" aria-controls="accordion-open-body-1">
              <span class="flex items-center font-bold uppercase">Sort By</span>
              <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
              </svg>
            </button>
          </h2>
          <div id="accordion-open-body-1" class="hidden" aria-labelledby="accordion-open-heading-1">
            <div class="border border-b-0 border-gray-200 dark:border-gray-300 dark:bg-white">
              <ul class="uppercase">
                <li><a href="#" class="block py-4 px-5 border-b border-gray-100 text-gray-400 hover:font-bold dark:text-gray-700 dark:hover:font-bold border-gray-200 dark:border-gray-100">Price (Low - High)</a></li>
                <li><a href="#" class="block py-4 px-5 border-b border-gray-100 text-gray-400 hover:font-bold dark:text-gray-700 dark:hover:font-bold border-gray-200 dark:border-gray-100">Newest</a></li>
                <li><a href="#" class="block py-4 px-5 border-b border-gray-100 text-gray-400 hover:font-bold dark:text-gray-700 dark:hover:font-bold border-gray-200 dark:border-gray-100">Top Sellers</a></li>
                <li><a href="#" class="block py-4 px-5 border-b border-gray-100 text-gray-400 hover:font-bold dark:text-gray-700 dark:hover:font-bold border-gray-200 dark:border-gray-100">Price (High - Low)</a></li>
                <li><a href="#" class="block py-4 px-5 border-b border-gray-100 text-gray-400 hover:font-bold dark:text-gray-700 dark:hover:font-bold border-gray-200 dark:border-gray-100">Product Type</a></li>
              </ul>
            </div>
          </div>

        
          <h2 id="accordion-open-heading-2">
            <button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right border-b text-gray-500 focus:ring-4 hover:bg-gray-100 gap-3" data-accordion-target="#accordion-open-body-2" aria-expanded="false" aria-controls="accordion-open-body-2">
              <span class="flex items-center font-bold uppercase">Brand</span>
              <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
              </svg>
            </button>
          </h2>
          <div id="accordion-open-body-2" class="hidden" aria-labelledby="accordion-open-heading-2">
            <div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700">
              <ul class="uppercase">
                <li><a href="#" class="block py-4 px-5 border-b border-gray-100 text-gray-400 hover:font-bold dark:text-gray-700 dark:hover:font-bold border-gray-200 dark:border-gray-100">Anda Seat</a></li>
                <li><a href="#" class="block py-4 px-5 border-b border-gray-100 text-gray-400 hover:font-bold dark:text-gray-700 dark:hover:font-bold border-gray-200 dark:border-gray-100">aigo</a></li>
                <li><a href="#" class="block py-4 px-5 border-b border-gray-100 text-gray-400 hover:font-bold dark:text-gray-700 dark:hover:font-bold border-gray-200 dark:border-gray-100">Cherry</a></li>
                <li><a href="#" class="block py-4 px-5 border-b border-gray-100 text-gray-400 hover:font-bold dark:text-gray-700 dark:hover:font-bold border-gray-200 dark:border-gray-100">Cougar</a></li>
                <li><a href="#" class="block py-4 px-5 border-b border-gray-100 text-gray-400 hover:font-bold dark:text-gray-700 dark:hover:font-bold border-gray-200 dark:border-gray-100">DarkFlash</a></li>
                <li><a href="#" class="block py-4 px-5 border-b border-gray-100 text-gray-400 hover:font-bold dark:text-gray-700 dark:hover:font-bold border-gray-200 dark:border-gray-100">Inno3D</a></li>
                <li><a href="#" class="block py-4 px-5 border-b border-gray-100 text-gray-400 hover:font-bold dark:text-gray-700 dark:hover:font-bold border-gray-200 dark:border-gray-100">Loctek</a></li>
                <li><a href="#" class="block py-4 px-5 border-b border-gray-100 text-gray-400 hover:font-bold dark:text-gray-700 dark:hover:font-bold border-gray-200 dark:border-gray-100">Lenovo</a></li>
              </ul>
            </div>
          </div>

          <h2 id="accordion-open-heading-3">
            <button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border-b focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-open-body-3" aria-expanded="false" aria-controls="accordion-open-body-3">
              <span class="flex items-center font-bold uppercase">Color</span>
              <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
              </svg>
            </button>
          </h2>
          <div id="accordion-open-body-3" class="hidden" aria-labelledby="accordion-open-heading-3">
            <div class="p-5 border border-t-0 border-gray-200 dark:border-gray-700">
              <ul class="uppercase">
                <li><a href="#" class="block py-4 px-5 border-b border-gray-100 text-gray-400 hover:font-bold dark:text-gray-700 dark:hover:font-bold border-gray-200 dark:border-gray-100">Color value 1</a></li>
                <li><a href="#" class="block py-4 px-5 border-b border-gray-100 text-gray-400 hover:font-bold dark:text-gray-700 dark:hover:font-bold border-gray-200 dark:border-gray-100">Color value 2</a></li>
              </ul>
            </div>
          </div>

        <h2 id="accordion-open-heading-4">
            <button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border-b focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-open-body-4" aria-expanded="false" aria-controls="accordion-open-body-4">
              <span class="flex items-center font-bold uppercase">Promotion</span>
              <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
              </svg>
            </button>
          </h2>
          <div id="accordion-open-body-4" class="hidden" aria-labelledby="accordion-open-heading-4">
            <div class="p-5 border border-t-0 border-gray-200 dark:border-gray-700">
              <ul class="uppercase">
                <li><a href="#" class="block py-4 px-5 border-b border-gray-100 text-gray-400 hover:font-bold dark:text-gray-700 dark:hover:font-bold border-gray-200 dark:border-gray-100">Promotion 1</a></li>
                <li><a href="#" class="block py-4 px-5 border-b border-gray-100 text-gray-400 hover:font-bold dark:text-gray-700 dark:hover:font-bold border-gray-200 dark:border-gray-100">Promotion 2</a></li>
              </ul>
            </div>
          </div>

          <h2 id="accordion-open-heading-5">
            <button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border-b focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-open-body-5" aria-expanded="false" aria-controls="accordion-open-body-5">
              <span class="flex items-center font-bold uppercase">Bundle</span>
              <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
              </svg>
            </button>
          </h2>
          <div id="accordion-open-body-5" class="hidden" aria-labelledby="accordion-open-heading-5">
            <div class="p-5 border border-t-0 border-gray-200 dark:border-gray-700">
              <ul class="uppercase">
                <li><a href="#" class="block py-4 px-5 border-b border-gray-100 text-gray-400 hover:font-bold dark:text-gray-700 dark:hover:font-bold border-gray-200 dark:border-gray-100">Bundle 1</a></li>
                <li><a href="#" class="block py-4 px-5 border-b border-gray-100 text-gray-400 hover:font-bold dark:text-gray-700 dark:hover:font-bold border-gray-200 dark:border-gray-100">Bundle 2</a></li>
              </ul>
            </div>
          </div>

          <br />
          <button class="flex items-center w-full justify-between bg-black text-white font-bold px-6 py-4 rounded">
            <span>APPLY</span>
            <font-awesome-icon icon="arrow-right" size="lg" class="ms-3" />
          </button>



        </div>
        </div>
    </div>

</template>

<script setup>
      import { ref, onMounted, onBeforeUnmount } from 'vue';
      import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
      import FBWTagComponent from './FBWTagComponent.vue';

      // List of tags
      const tags = ref(['Peripheral', 'Keyboard', 'Power System']);

      const showFilterPanel = ref(false);
      const filterPanel = ref(null);

      function toggleFilterPanel() {
        showFilterPanel.value = !showFilterPanel.value;
      }

      function handleClickOutside(event) {
        if (showFilterPanel.value && filterPanel.value && !filterPanel.value.contains(event.target)) {
          showFilterPanel.value = false;
        }
      }

      onMounted(() => {
        document.addEventListener('mousedown', handleClickOutside);
      });

      onBeforeUnmount(() => {
        document.removeEventListener('mousedown', handleClickOutside);
      });
      
  </script>


<style scoped>
  .filter-panel-enter-active,
  .filter-panel-leave-active {
    transition: transform 0.3s ease;
  }
  .filter-panel-enter,
  .filter-panel-leave-to {
    transform: translateX(100%);
  }
</style>