Efl Learner Profile In Page Bookmark

import { findPos } from '../efl-filter-bar/efl-filter-bar';
import { Dialog } from '../lightbox-overlay/lightbox-overlay';

export default parentElement => {
  const DIALOG_ID = 'in-page-bookmark-signin';
  const bookmarkCta = parentElement.querySelector(
    '.efl-learner-profile-in-page-bookmark__link'
  );
  const inPageshareCta = parentElement.querySelector(
    '.efl-learner-profile-in-page-bookmark__share-button'
  );
  const bookmarkAllCta = document.querySelectorAll(
    '.efl-learner-profile-in-page-bookmark__link'
  );
  const MOBILE_BREAKPOINT = 820;
  const craateBookmarkCta = parentElement.querySelector(
    '.bookmark-create-list'
  );
  const removeFromAll = parentElement.querySelector('.bookmark-remove-all');
  const bookmarkDone = parentElement.querySelector('.bookmark-done');
  const checkbokDiv = parentElement.querySelector('.bookmark-list');
  const { userFanId } = parentElement.dataset;
  let bookmarkLink = decodeURI(window.location.pathname);
  let bookmarkImage;
  let bookmarkHeadline;
  let bookmarkPageId;
  let bookmarkCategory;
  const inPageSharePopup = parentElement.querySelector(
    '.efl-learner-profile-in-page-bookmark__share--popup'
  );

  // eslint-disable-next-line
  const jumpToSection = bookmarkCta.closest('.jump-to-section__actions') ? true : false;

  bookmarkLink = bookmarkLink.replaceAll(' ', '-');

  const generateLightBox = (labelId, popupType) => {
    let popupClass;
    let containerClass;

    if (popupType === 'signin') {
      popupClass = 'efl-learner-profile-in-page-bookmark__signin-popup';
      containerClass = 'efl-learner-profile-in-page-bookmark';
    } else {
      popupClass = 'efl-learner-profile-bookmark__popup';
      containerClass = 'efl-learner-profile';
    }
    const popupDiv = parentElement.querySelector(`.${popupClass}`);
    let html = popupDiv.outerHTML;

    html = html.replace(`${popupClass} hidden`, `${popupClass}`);

    return `
    <div role="dialog" id="${DIALOG_ID}" aria-labelledby="${labelId}" aria-modal="true" class="lightbox-overlay">
      <div class="${containerClass}">
      ${html}
      </div>
    </div>`;
  };

  const removeLightBox = () => {
    if (document.getElementById(DIALOG_ID)) {
      document.getElementById(DIALOG_ID).remove();
    }
  };

  const swithScreen = screen => {
    const lightbox = document.querySelector(`#${DIALOG_ID}`);
    const allSteps = lightbox.querySelectorAll('.steps');
    const activeStep = lightbox.querySelector(`.${screen}`);

    allSteps.forEach(steps => {
      steps.classList.add('hidden');
    });
    activeStep.classList.remove('hidden');
  };

  const checkNameExist = name => {
    const bookmarkLists = localStorage.getItem('bookmarkListData');

    if (bookmarkLists) {
      const bookmarkListJson = JSON.parse(bookmarkLists);
      const bookmarkJson = [];

      bookmarkListJson.eflBookmarks.forEach(bookmark => {
        bookmarkJson.push(bookmark.tag);
      });

      if (bookmarkJson.includes(name)) {
        return true;
      }
    }
    return false;
  };

  const checkboxEvent = e => {
    const isChecked = e.target.checked;
    const bookmarkName = e.target.value;

    // to sync other bookmark checkbox
    const bookmarkAllItem = document.querySelectorAll('.bookmark-list--item');

    bookmarkAllItem.forEach(checkboxItem => {
      const checkbox = checkboxItem.querySelector('input[type=checkbox]');

      if (e.target !== checkbox && e.target.value === checkbox.value) {
        checkbox.checked = isChecked;
      }
    });

    // console.log(bookmarkName);
    // console.log(isChecked);
    // eslint-disable-next-line  no-use-before-define
    updateBookmark(isChecked, bookmarkName);
  };

  async function updateBookmarkListCallback(bookmarklist) {
    const url = `/Personalisation/UpdateUserBookmark`;
    // eslint-disable-next-line compat/compat
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Cache-Control': 'no-cache',
        Pragma: 'no-cache',
        Expires: '0',
      },
      body: JSON.stringify(bookmarklist),
    });

    return response.json();
  }

  function updateBookmarkList(updateBookmark) {
    try {
      // isAjaxRuning = true;
      updateBookmarkListCallback(updateBookmark).then(response => {
        console.log(response);
      });
    } catch (e) {
      throw new Error('Unable to update player data ::', e);
    }
  }

  function createBookmarkGroup(name, desc, saveButton) {
    try {
      // isAjaxRuning = true;
      let oldBookmark = [];
      let updateBookmark = [];

      saveButton.classList.add('loading-bar');
      saveButton.setAttribute('aria-disabled', 'true');

      const newBookmarkDetail = `{
        "tag": "${name}",
        "description": "${desc}",
        "bookmarks": []
        }`;

      if (localStorage.getItem('bookmarkListUpdateData')) {
        oldBookmark = JSON.parse(localStorage.getItem('bookmarkListData'));
        updateBookmark = JSON.parse(
          localStorage.getItem('bookmarkListUpdateData')
        );
        const bookmarLength = oldBookmark.eflBookmarks.length;

        oldBookmark.eflBookmarks[bookmarLength] = JSON.parse(newBookmarkDetail);
        updateBookmark.eflBookmarks[bookmarLength] = JSON.parse(
          newBookmarkDetail
        );
      } else {
        const defaultBookmark = `{
            "bookmark": {
              "id": "${userFanId}",
              "eflBookmarks": [${newBookmarkDetail}]
            }
          }`;

        oldBookmark = JSON.parse(defaultBookmark);
        updateBookmark = JSON.parse(defaultBookmark);
      }

      updateBookmarkListCallback(updateBookmark).then(response => {
        if (
          response &&
          response.FAIWFResponse &&
          response.FAIWFResponse.IsAbusive
        ) {
          swithScreen('step5');
          saveButton.classList.remove('loading-bar');
          saveButton.setAttribute('aria-disabled', 'false');
        } else if (response && !response.FAIWFResponse && response.Error) {
          swithScreen('step6');
          saveButton.classList.remove('loading-bar');
          saveButton.setAttribute('aria-disabled', 'false');
        } else {
          localStorage.setItem('bookmarkListData', JSON.stringify(oldBookmark));
          localStorage.setItem(
            'bookmarkListUpdateData',
            JSON.stringify(updateBookmark)
          );

          // eslint-disable-next-line no-useless-escape
          let idName = name.replace(/[&\/\\#,+()$~%.'":*?<>{}\s]/g, '-');

          idName = idName.replaceAll(' ', '-');
          const item = `<div aria-checked="false" class="bookmark-list--item">
                          <input type="checkbox" id="checkbox--${idName}" value="${name}" class="">
                          <label for="checkbox---${idName}">${name}</label>
                      </div>`;
          const bookmarkList = parentElement.querySelector('.bookmark-list');
          const allPageBookmarkList = document.querySelectorAll(
            '[data-behavior="in-page-bookmark"]'
          );

          bookmarkList.insertAdjacentHTML('beforeend', item);

          const checkBox = bookmarkList.querySelector(`#checkbox--${idName}`);

          checkBox.addEventListener('click', event => {
            checkboxEvent(event);
          });

          allPageBookmarkList.forEach(inPageBookmark => {
            if (parentElement !== inPageBookmark) {
              const otherBookmarkList = inPageBookmark.querySelector(
                '.bookmark-list'
              );

              otherBookmarkList.insertAdjacentHTML('beforeend', item);

              const otherCheckBox = otherBookmarkList.querySelector(
                `#checkbox--${idName}`
              );

              otherCheckBox.addEventListener('click', event => {
                checkboxEvent(event);
              });
            }
          });

          saveButton.classList.remove('loading-bar');
          saveButton.setAttribute('aria-disabled', 'false');

          removeLightBox();
        }
      });
    } catch (e) {
      throw new Error('Unable to update player data ::', e);
    }
  }

  async function getBookmarkIdCallback() {
    const url = `/Personalisation/GetBookmarkItemId?urlPath=${bookmarkLink}`;
    // eslint-disable-next-line compat/compat
    const response = await fetch(url, {
      headers: {
        'Content-Type': 'application/json',
        'Cache-Control': 'no-cache',
        Pragma: 'no-cache',
        Expires: '0',
      },
    });

    return response.json();
  }

  function getBookmarkId() {
    try {
      // isAjaxRuning = true;
      localStorage.setItem('bookmarkPageDetails', '');
      getBookmarkIdCallback().then(response => {
        if (response) {
          localStorage.setItem(
            'bookmarkPageDetails',
            JSON.stringify(response.bookmark.results[0])
          );
          // console.log(bookmarkPageId);
        }
      });
    } catch (e) {
      throw new Error('Unable to update player data ::', e);
    }
  }

  const initBookmarkCheckbox = () => {
    const checkBoxs = checkbokDiv.querySelectorAll('input[type="checkbox"]');

    checkBoxs.forEach(checkbox => {
      checkbox.addEventListener('click', e => {
        checkboxEvent(e);
      });
    });
  };

  const openLightbox = (focusBtn, popupType) => {
    // Create the lightbox
    const lightboxContainer = document.createElement('div');

    lightboxContainer.innerHTML = generateLightBox(
      {
        labelId: focusBtn.getAttribute('id'),
      },
      popupType
    );
    document.body.appendChild(lightboxContainer);
    let firstFocus;

    if (popupType === 'signin') {
      firstFocus = lightboxContainer.querySelector('.in-page-bookmark-login');
    } else {
      firstFocus = lightboxContainer.querySelector('input[type=text]');
    }
    // eslint-disable-next-line no-new
    new Dialog({
      dialogId: DIALOG_ID,
      focusAfterClosed: focusBtn,
      focusFirst: firstFocus,
      closeCallBack: () => removeLightBox(),
    });

    const bookmarkDescCta = lightboxContainer.querySelector(
      '.bookmark-add-desc'
    );
    const bookmarkDesc = lightboxContainer.querySelector(
      '.bookmark-desc-wrapper'
    );
    const listName = lightboxContainer.querySelector('.bookmark-list-name');
    const listCount = lightboxContainer.querySelector(
      '.bookmark-list-name-count'
    );
    const listDesc = lightboxContainer.querySelector('.bookmark-list-desc');
    const listDescCount = lightboxContainer.querySelector(
      '.bookmark-list-desc-count'
    );
    const createCta = lightboxContainer.querySelector('.create-new-bookmark');
    const cancelList = lightboxContainer.querySelector(
      '.cancel-create-bookmark'
    );
    const editBookmarkCta = lightboxContainer.querySelector(
      '.edit-bookmark-name'
    );
    const errorBookmarkCta = lightboxContainer.querySelector(
      '.error-bookmark-name'
    );
    const serverErrorBookmarkCta = lightboxContainer.querySelector(
      '.server-error-bookmark'
    );

    if (bookmarkDescCta) {
      const { addText, cancelText } = bookmarkDescCta.dataset;

      bookmarkDescCta.addEventListener('click', e => {
        e.preventDefault();
        bookmarkDesc.classList.toggle('hidden');
        if (bookmarkDesc.classList.contains('hidden')) {
          bookmarkDescCta.innerText = addText;
        } else {
          bookmarkDescCta.innerText = cancelText;
          listDesc.value = '';
        }
      });
    }

    if (listName) {
      listName.addEventListener('input', e => {
        listCount.innerHTML = `${e.target.value.length}/100`;
      });
    }

    if (listDesc) {
      listDesc.addEventListener('input', e => {
        listDescCount.innerHTML = `${e.target.value.length}/500`;
      });
    }

    if (createCta) {
      createCta.addEventListener('click', e => {
        e.preventDefault();
        if (
          !listName.value ||
          e.target.getAttribute('aria-disabled') === 'true'
        ) {
          return;
        }

        if (checkNameExist(listName.value)) {
          swithScreen('step2');
        } else {
          createBookmarkGroup(listName.value, listDesc.value, createCta);
        }
      });
    }

    if (cancelList) {
      cancelList.addEventListener('click', e => {
        e.preventDefault();
        removeLightBox();
      });
    }

    if (editBookmarkCta) {
      editBookmarkCta.addEventListener('click', e => {
        e.preventDefault();
        swithScreen('step1');
      });
    }

    if (errorBookmarkCta) {
      errorBookmarkCta.addEventListener('click', e => {
        e.preventDefault();
        swithScreen('step1');
      });
    }
    if (serverErrorBookmarkCta) {
      serverErrorBookmarkCta.addEventListener('click', e => {
        e.preventDefault();
        swithScreen('step1');
      });
    }
  };

  const updatePageBookmark = (bookmarkName, type) => {
    const bookmarkPageDetails = JSON.parse(
      localStorage.getItem('bookmarkPageDetails')
    );

    bookmarkPageId = bookmarkPageDetails.itemId;
    bookmarkCategory = bookmarkPageDetails.categoryTagName;
    bookmarkHeadline = bookmarkPageDetails.bookmarkHeadline;
    bookmarkLink = bookmarkPageDetails.bookmarkLink;
    bookmarkImage = bookmarkPageDetails.bookmarkImage;
    const BookmarkItem = `{
      "pageId": "${bookmarkPageId}"
    }`;
    const BookmarkItem2 = `{
      "pageId": "${bookmarkPageId}",
      "bookmarkHeadline": "${bookmarkHeadline}",
      "categoryTagName": "${bookmarkCategory}",
      "bookmarkImage": "${bookmarkImage}",
      "bookmarkLink": "${bookmarkLink}"
    }`;

    const oldBookmark = JSON.parse(localStorage.getItem('bookmarkListData'));
    const updateBookmark = JSON.parse(
      localStorage.getItem('bookmarkListUpdateData')
    );
    const eflBookmarkList = oldBookmark.eflBookmarks;

    eflBookmarkList.forEach((eflBookmark, index) => {
      if (
        eflBookmark.tag === bookmarkName ||
        (bookmarkName.toLowerCase() === 'my bookmark list' &&
          eflBookmark.tag === '')
      ) {
        if (type === 'add') {
          const eflBookmarkLength = eflBookmark.bookmarks.length;

          // eslint-disable-next-line no-param-reassign
          eflBookmark.bookmarks[eflBookmarkLength] = JSON.parse(BookmarkItem2);
          oldBookmark.eflBookmarks[index].bookmarks[
            eflBookmarkLength
          ] = JSON.parse(BookmarkItem2);
          updateBookmark.eflBookmarks[index].bookmarks[
            eflBookmarkLength
          ] = JSON.parse(BookmarkItem);
          localStorage.setItem('bookmarkListData', JSON.stringify(oldBookmark));
          localStorage.setItem(
            'bookmarkListUpdateData',
            JSON.stringify(updateBookmark)
          );

          updateBookmarkList(updateBookmark);
          bookmarkAllCta.forEach(bookmarkSingle => {
            bookmarkSingle.classList.add('active');
          });
        } else if (type === 'remove') {
          oldBookmark.eflBookmarks[index].bookmarks.forEach((bookmak, i) => {
            if (bookmak.pageId === bookmarkPageId) {
              oldBookmark.eflBookmarks[index].bookmarks.splice(i, 1);
              updateBookmark.eflBookmarks[index].bookmarks.splice(i, 1);

              localStorage.setItem(
                'bookmarkListData',
                JSON.stringify(oldBookmark)
              );
              localStorage.setItem(
                'bookmarkListUpdateData',
                JSON.stringify(updateBookmark)
              );

              updateBookmarkList(updateBookmark);
            }
          });
        }
      }
    });
  };

  const updateBookmark = (isChecked, bookmarkName) => {
    if (isChecked) {
      updatePageBookmark(bookmarkName, 'add');
    } else {
      updatePageBookmark(bookmarkName, 'remove');
      const checkBoxs = checkbokDiv.querySelectorAll('input[type="checkbox"]');
      let checkFlag = false;

      checkBoxs.forEach(checkbox => {
        if (checkbox.checked) {
          checkFlag = true;
        }
      });

      if (!checkFlag) {
        bookmarkAllCta.forEach(bookmarkSingle => {
          bookmarkSingle.classList.remove('active');
        });
      }
    }
  };

  const limitToolTipHeight = toolTip => {
    // Limit height of desktop ToolTip within document height
    if (jumpToSection && window.innerWidth > MOBILE_BREAKPOINT) {
      const bottomOfElementOnScreen =
        findPos(parentElement) +
        parentElement.clientHeight +
        toolTip.clientHeight;

      const designMargin = 22;
      const overlap = bottomOfElementOnScreen - window.innerHeight;
      const calculatedHeight = toolTip.clientHeight - overlap - designMargin;

      // flip pop-up if it gets too small
      if (calculatedHeight < 180) {
        // eslint-disable-next-line
        toolTip.style.maxHeight = null;
        toolTip.classList.add('flipped');
      } else {
        // eslint-disable-next-line
        toolTip.style.maxHeight = `${calculatedHeight}px`;
        toolTip.classList.remove('flipped');
      }

      // toolTip.style.maxHeight = `${calculatedHeight}px`;
    }
  };

  const updateToolTip = event => {
    const toolTipWrapper = event.target.closest(
      '.efl-learner-profile-in-page-bookmark__wrapper'
    );
    const toolTip = toolTipWrapper.querySelector(
      '.efl-learner-profile-in-page-bookmark__list'
    );
    const { bookmarkTitleAdd, bookmarkTitleRemove } = toolTip.querySelector(
      '.title'
    ).dataset;
    const removeAllCta = toolTip.querySelector('.bookmark-remove-all');
    const createCta = toolTip.querySelector('.bookmark-create-list');
    const doneCta = toolTip.querySelector('.bookmark-done');

    if (jumpToSection) {
      document.querySelector('.jump-to-section__actions').style.overflow =
        'visible';
      document.querySelector('.jump-to-section__social-links').style.display =
        'none';
    }

    if (!bookmarkCta.classList.contains('active')) {
      // bookmarkCta.classList.toggle('active');
      toolTip.querySelector('.title').innerText = bookmarkTitleAdd;
      removeAllCta.classList.add('hidden');
      createCta.classList.remove('hidden');
      doneCta.classList.remove('update-bookmark');
    } else {
      toolTip.querySelector('.title').innerText = bookmarkTitleRemove;
      removeAllCta.classList.remove('hidden');
      createCta.classList.add('hidden');
      doneCta.classList.add('update-bookmark');
    }

    toolTip.classList.remove('hidden');
    toolTip.removeAttribute('style');

    limitToolTipHeight(toolTip);
  };

  const initBookmark = () => {
    if (window.innerWidth >= MOBILE_BREAKPOINT) {
      if (bookmarkCta) {
        bookmarkCta.addEventListener('click', e => {
          e.preventDefault();
          if (bookmarkCta.classList.contains('logged-in')) {
            updateToolTip(e);
          } else {
            openLightbox(bookmarkCta, 'signin');
          }
        });
        document.addEventListener('click', e => {
          if (
            !(
              e.target.closest('.efl-learner-profile-in-page-bookmark__list') ||
              e.target.closest('.efl-learner-profile-in-page-bookmark__link')
            )
          ) {
            parentElement
              .querySelector('.efl-learner-profile-in-page-bookmark__list')
              .classList.add('hidden');

            if (jumpToSection) {
              document.querySelector(
                '.jump-to-section__actions'
              ).style.overflow = '';
              document.querySelector(
                '.jump-to-section__social-links'
              ).style.display = '';
            }
          }
        });

        bookmarkCta.addEventListener('keydown', e => {
          if (e.keyCode === 13) {
            e.preventDefault();
            if (bookmarkCta.classList.contains('logged-in')) {
              updateToolTip(e);
              if (!bookmarkCta.classList.contains('active')) {
                parentElement
                  .querySelector(
                    '.efl-learner-profile-in-page-bookmark__list input[type=checkbox]'
                  )
                  .focus();
              } else {
                removeFromAll.focus();
              }
            } else {
              openLightbox(bookmarkCta, 'signin');
            }
          }
        });
      }
    } else {
      // eslint-disable-next-line no-lonely-if
      if (bookmarkCta) {
        bookmarkCta.addEventListener('click', e => {
          e.preventDefault();
          if (bookmarkCta.classList.contains('logged-in')) {
            if (!jumpToSection) {
              if (window.innerWidth < MOBILE_BREAKPOINT) {
                parentElement.classList.add('efl-profile-dark-overlay');
                document.body.style.overflow = 'hidden';
              }
            }
            updateToolTip(e);
            setTimeout(() => {
              const toolTipWrapper = e.target.closest(
                '.efl-learner-profile-in-page-bookmark__wrapper'
              );
              const toolTip = toolTipWrapper.querySelector(
                '.efl-learner-profile-in-page-bookmark__list'
              );

              toolTip.classList.add('add-animation');
              if (document.querySelector('.efl-page-content__tray')) {
                document
                  .querySelector('.efl-page-content__tray')
                  .classList.add('page-bookmark');
              }
            }, 50);
          } else {
            openLightbox(bookmarkCta, 'signin');
          }
        });

        document.addEventListener('click', e => {
          if (
            !(
              e.target.closest('.efl-learner-profile-in-page-bookmark__list') ||
              e.target.closest('.efl-learner-profile-in-page-bookmark__link')
            )
          ) {
            const tooltip = parentElement.querySelector(
              '.efl-learner-profile-in-page-bookmark__list'
            );

            if (tooltip) {
              if (document.querySelector('.efl-page-content__tray')) {
                document
                  .querySelector('.efl-page-content__tray')
                  .classList.remove('page-bookmark');
              }
              tooltip.classList.remove('add-animation');

              setTimeout(() => {
                tooltip.classList.add('hidden');
                if (!jumpToSection) {
                  parentElement.classList.remove('efl-profile-dark-overlay');
                  document.body.removeAttribute('style');
                }
              }, 300);
            }
          }
        });
      }
    }
  };

  if (craateBookmarkCta) {
    craateBookmarkCta.addEventListener('click', e => {
      e.preventDefault();
      openLightbox(craateBookmarkCta, 'createbookmark');
    });

    craateBookmarkCta.addEventListener('keydown', e => {
      if (e.keyCode === 13) {
        e.preventDefault();
        openLightbox(craateBookmarkCta, 'createbookmark');
      }
    });
  }

  const removeAllBookmark = () => {
    const checkboxes = parentElement
      .querySelector('.bookmark-list')
      .querySelectorAll('[type="checkbox"]');

    checkboxes.forEach(checkbox => {
      const bookmarkName = checkbox.value;

      // eslint-disable-next-line  no-param-reassign
      checkbox.checked = false;
      checkbox.removeAttribute('checked');
      checkbox.closest('div').setAttribute('aria-checked', 'false');
      updatePageBookmark(bookmarkName, 'remove');
    });

    bookmarkAllCta.forEach(bookmarkSingle => {
      bookmarkSingle.classList.remove('active');
    });
  };

  if (removeFromAll) {
    removeFromAll.addEventListener('click', e => {
      e.preventDefault();
      removeAllBookmark();
    });
    removeFromAll.addEventListener('keydown', e => {
      if (e.keyCode === 13) {
        e.preventDefault();
        removeAllBookmark();
      }
    });
  }

  if (bookmarkDone) {
    bookmarkDone.addEventListener('click', e => {
      e.preventDefault();
      const tooltip = parentElement.querySelector(
        '.efl-learner-profile-in-page-bookmark__list'
      );

      if (document.querySelector('.efl-page-content__tray')) {
        document
          .querySelector('.efl-page-content__tray')
          .classList.remove('page-bookmark');
      }
      tooltip.classList.remove('add-animation');
      setTimeout(() => {
        tooltip.classList.add('hidden');
        if (!jumpToSection) {
          parentElement.classList.remove('efl-profile-dark-overlay');
          document.body.removeAttribute('style');
        }
      }, 300);
    });
  }

  if (inPageshareCta) {
    inPageshareCta.addEventListener('click', e => {
      e.preventDefault();

      if (window.innerWidth >= MOBILE_BREAKPOINT) {
        if (inPageSharePopup) {
          inPageSharePopup.classList.toggle('hidden');
        }
      } else {
        if (!navigator.share) {
          return;
        }

        navigator
          .share({
            title: document.title,
            url: window.location.href,
          })
          .catch(console.error);
      }
    });
  }

  document.addEventListener('click', e => {
    if (
      !(
        e.target.closest(
          '.efl-learner-profile-in-page-bookmark__share-button'
        ) ||
        e.target.closest('.efl-learner-profile-in-page-bookmark__share--popup')
      )
    ) {
      if (inPageSharePopup) {
        inPageSharePopup.classList.add('hidden');
      }
    }
  });

  window.addEventListener('scroll', () => {
    const toolTip = parentElement.querySelector(
      '.efl-learner-profile-in-page-bookmark__list'
    );

    limitToolTipHeight(toolTip);
  });

  initBookmark();

  getBookmarkId();

  initBookmarkCheckbox();
};