const bookmarkMenuHrefTemplate = '/hyperapi/bookmarks-dropdown'

export default class {
  async showBookmarkMenu(ev, el) {
    if ((ev.target.dataset.bookmarkId === el.dataset.bookmarkId) && el.childElementCount === 0) {
      const bookmarkMenuHref = `${bookmarkMenuHrefTemplate}/${ev.target.dataset.bookmarkType}?id=${ev.target.dataset.conceptId}&require_reload=${el.dataset.requireReload}`;
      const res = await this.api.getHTML(bookmarkMenuHref);
      if (res.error) {
        return;
      }
      const frag = res.value;
      el.appendChild(frag);
      const menu = el.childNodes[0];
      const bRect = el.getBoundingClientRect()
      if (bRect.left < window.innerWidth - bRect.right) {
        menu.style.right = 'unset';
      }
    } else if (el.childElementCount > 0) {
      el.removeChild(el.childNodes[0]);
    }
  }

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

    if (clicked === 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.dataset.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.dataset.originallyContainedIn;
    }

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