<template>
  <div class="inline-flex md:ml-auto">
    <header
      class="
        inline-flex
        flex-wrap
        container
        px-4
        py-1
        sm:px-0
        transition-all transition-500
      "
    >
      <ul
        class="
          list-none
          m-0
          sm:flex
          justify-left
          capitalize
          transition-all transition-500
        "
      >
        <!-- Topics -->
        <li class="py-1 mx-5">
          <div class="relative" x-data="{ open: false }">
            <button
              @click="setActive(0)"
              class="
                flex flex-row
                items-center
                w-full
                md:w-auto
                md:inline
                md:mt-0
                md:ml-4
                animated-link
              "
            >
              <span class="capitalize">{{ topic.replace(/_/g, " ") }}</span>
              <svg
                fill="currentColor"
                viewBox="0 0 20 20"
                :class="{
                  'rotate-180': active == 0,
                  'rotate-0': !active == 0,
                }"
                class="
                  inline
                  w-4
                  h-4
                  mt-1
                  ml-1
                  transition-transform
                  duration-200
                  transform
                  md:-mt-1
                "
              >
                <path
                  fill-rule="evenodd"
                  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                  clip-rule="evenodd"
                ></path>
              </svg>
            </button>
            <div
              v-if="active == 0"
              x-show="open"
              x-transition:enter="transition ease-out duration-100"
              x-transition:enter-start="transform opacity-0 scale-95"
              x-transition:enter-end="transform opacity-100 scale-100"
              x-transition:leave="transition ease-in duration-75"
              x-transition:leave-start="transform opacity-100 scale-100"
              x-transition:leave-end="transform opacity-0 scale-95"
              class="
                absolute
                w-full
                mt-2
                origin-top-right
                rounded-md
                shadow-lg
                md:w-48
                z-30
              "
            >
              <div
                v-if="open"
                class="
                  w-64
                  px-2
                  py-2
                  bg-white
                  rounded-md
                  shadow
                  dark:bg-gray-700
                "
              >
                <a
                  class="
                    cursor-pointer
                    block
                    px-4
                    py-2
                    mt-2
                    text-sm
                    font-semibold
                    bg-transparent
                    rounded-lg
                    dark:bg-transparent
                    dark:hover:bg-gray-600
                    dark-:focus:bg-gray-600
                    dark:focus:text-white
                    dark:hover:text-white
                    dark:text-gray-200
                    md:mt-0
                    hover:text-gray-900
                    focus:text-gray-900
                    hover:bg-gray-200
                    focus:bg-gray-200
                    focus:outline-none
                    focus:shadow-outline
                  "
                  v-for="topic in topics"
                  :key="topic"
                  @click.self="
                    setTopic(topic);
                    open = false;
                  "
                  >{{ topic.replace(/_/g, " ") }}</a
                >
              </div>
            </div>
          </div>
        </li>
      </ul>
    </header>
  </div>
</template>

<script>
/*
 * I'm a lazy guy, so i used this script
 * https://codepen.io/ninaregli/pen/OjeMLP
 * to calculate the current scroll position
 *
 * Will be used to add/remove the additional
 * css classes to show the sticky navbar
 */

export default {
  props: ["topics"],
  data: function () {
    return {
      isOpen: false,
      open: false,
      active: null,
      listArchive: false,
      topic: "Popular Topics",
    };
  },

  methods: {
    setActive(index) {
      this.active = index;
      this.open = !this.open;
    },
    setTopic(event) {
      this.$emit("selectedTopic", event);
      this.topic = event;
    },
    close(e) {
      if (!this.$el.contains(e.target)) {
        this.open = false;
      }
    },
  },

  mounted() {
    document.addEventListener("click", this.close);
  },
  beforeDestroy() {
    document.removeEventListener("click", this.close);
  },
};
</script>