const bookmarkMenuHrefTemplate = '/hyperapi/bookmarks-dropdown'

export default class {
  async showBookmarkMenu(ev, el) {
    if ((ev.target.dataset.bookmarkId === el.getString('bookmarkId')) && el.childElementCount === 0) {
      const searchParams = new URLSearchParams({
        'id': ev.target.dataset.conceptId,
        'require_reload': el.dataset.requireReload,
      });
      const bookmarkMenuHref = `${bookmarkMenuHrefTemplate}/${ev.target.dataset.bookmarkType}?${searchParams}`;
      const res = await this.api.getHTML(bookmarkMenuHref);
      if (res.error) {
        return;
      }
      const frag = res.value;
      el.appendChild(frag);
      const menu = el.childNodes[0];
      menu.showPopover();

      const bRect = el.getBoundingClientRect();
      const menuRect = menu.getBoundingClientRect();
      const preferredLeft = bRect.right - menuRect.width;
      const preferredRight = bRect.right;
      const enoughSpace = preferredLeft >= 0;
      const scrollY = window.scrollY || window.pageYOffset;
      if (enoughSpace) {
        menu.style.left = `${preferredLeft}px`;
      } else {
        menu.style.left = `${bRect.left}px`;
      }
      menu.style.top = `${bRect.bottom + scrollY}px`;

      menu.addEventListener('beforetoggle', (e) => {
        if (e.newState === 'closed') {
          // if it's still in the tree, remove it
          // the delay is required to make sure its removed instantly when
          // clicking the button when the menu is open
          setTimeout(() => {menu.remove()}, 100);
        };
      }, { once: true });

    } else if (el.childElementCount > 0) {
      el.removeChild(el.childNodes[0]);
    }
  }

  selectBookmarkCollection(ev, el) {
    const clicked = ev.sender;

    if (ev.sender === el) {
      if (clicked.classList.contains('selected')) {
        clicked.classList.remove('selected');
      } else {
        clicked.classList.add('selected');
      }
    } else {
      el.classList.remove('selected');
    }
  }

  async saveBookmarks(ev, el) {
    const bookmarkHref = el.getString('bookmarkEndpoint');
    const collection = el.querySelector('.bookmark-dropdown-item.selected');
    let data = {};
    if (collection) {
      data['operation'] = 'move';
      data['collection_id'] = collection.dataset.collectionId;
      data['memo'] = el.querySelector('.bookmark-memo-input').value;
    } else {
      data['operation'] = 'remove';
      data['collection_id'] = el.getString('originallyContainedIn');
    }

    const options = {
      method: 'POST',
      body: JSON.stringify(data),
      headers: {
        'Content-Type': 'application/json',
      },
    }
    const requireReload = el.getInt('requireReload') !== 0;
    el.remove();
    await fetch(bookmarkHref, options);
    if (requireReload) {
      window.location.reload();
    }
  }
}