<template>
  <div>
    <a
      class="text-gray-600 block"
      href="#pablo"
      ref="btnDropdownRef"
      v-on:click="toggleDropdown($event)"
    >
      <div class="items-center flex">
        <span
          class="w-12 h-12 text-sm text-white bg-gray-300 inline-flex items-center justify-center rounded-full"
        >

          <img
            alt="..."
            class="w-full rounded-full align-middle border-none shadow-lg"
            :src="image"
          />
        </span>
      </div>
    </a>
    <div
      ref="popoverDropdownRef"
      class="bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg min-w-48"
      v-bind:class="{
        hidden: !dropdownPopoverShow,
        block: dropdownPopoverShow,
      }"
    >

        <inertia-link :href="route('profile.show')" :active="route().current('profile.show')"  class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800">
            Profile
        </inertia-link>

        <div class="h-0 my-2 border border-solid border-gray-200" />
        <form method="POST" :action="route('logout')">
            <input type="hidden" name="_token" :value="csrf">
            <button class="text-sm py-2 px-4 text-left font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800">
                Log Out
            </button>
        </form>

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

<script>
import { createPopper } from "@popperjs/core";


export default {
  data() {
    return {
      dropdownPopoverShow: false,
      image: this.$page.props.user.profile_photo_path != null ? this.$page.props.user.profile_photo_path : this.$page.props.user.profile_photo_url ,
      csrf: document.querySelector('meta[name=csrf-token]').getAttribute('content')
    };
  },


  methods: {
    toggleDropdown: function (event) {
      event.preventDefault();
      if (this.dropdownPopoverShow) {
        this.dropdownPopoverShow = false;
      } else {
        this.dropdownPopoverShow = true;
        createPopper(this.$refs.btnDropdownRef, this.$refs.popoverDropdownRef, {
          placement: "bottom-start",
        });
      }
    },

    logout() {
        this.$inertia.post(route('logout'));
    },
  },
};
</script>
