<script>
  // library for creating dropdown menu appear on click
  import { createPopper } from "@popperjs/core";

  // core components

  let dropdownPopoverShow = false;
  export let wg_user_state;
  export let wg_id;
  export let filter = "";

  let btnDropdownRef;
  let popoverDropdownRef;

  const toggleDropdown = (event) => {
    event.preventDefault();
    if (dropdownPopoverShow) {
      dropdownPopoverShow = false;
    } else {
      dropdownPopoverShow = true;
      createPopper(btnDropdownRef, popoverDropdownRef, {
        placement: "bottom-start",
      });
    }
  };

 async function wg_user_disable(wg_id,state) {
     console.log("ID -> "+wg_id);
     console.log("State -> "+state);
     console.log("Filter state before -> "+filter);

     let tmp_filter = filter;
     filter = null;
     filter = tmp_filter;

     console.log("Filter state after -> "+filter);

      state = !state;
      const wgReq = await fetch(
          '/api2/wgEditState?id='+wg_id+'&state='+state
      );

  }

</script>

<div>
  <a
    class="text-blueGray-500 py-1 px-3"
    href="#pablo"
    bind:this="{btnDropdownRef}"
    on:click="{toggleDropdown}"
  >
    <i class="fas fa-ellipsis-v"></i>
  </a>
  <div
    bind:this="{popoverDropdownRef}"
    class="bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg min-w-48 {dropdownPopoverShow ? 'block':'hidden'}"
  >
    <button
      href="#pablo" on:click={(e) => e.preventDefault()}
      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
    >
      Show Detail
    </button>
    <button
      href="#pablo" on:click={(e) => e.preventDefault()}
      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
    >
      Edit
    </button>
    <button
            on:click={ (e) => wg_user_disable(wg_id, wg_user_state) }
      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
    >
        { wg_user_state != true ? 'Enable' : 'Disable' }

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