Efl Learner Profile Bookmark: My Bookmark List 3

import { Dialog } from '../lightbox-overlay/lightbox-overlay';

export default parentElement => {
  const DIALOG_ID = 'manage-bookmark-dialog';
  const createBookmark = parentElement.querySelector(
    '.create-new-bookmark-list'
  );
  const viewList = parentElement.querySelectorAll('.view-bookmark-list');
  const backCta = document.querySelector('.efl-learner-profile-bookmark__back');
  const container = document.querySelector(
    '[data-page="bookmarks"] .efl-learner-profile'
  );
  const bookmarkList = container.querySelectorAll(
    '.efl-learner-profile-bookmark'
  );
  const MOBILE_BREAKPOINT = 820;
  const { fanid } = document.querySelector(
    '.efl-profile-hero-banner__content--profile__picture--dp'
  ).dataset;

  const updatePopupDetails = option => {
    const popupDiv = document.querySelector(
      '.efl-learner-profile-bookmark__popup'
    );
    const step = popupDiv.querySelector('.step1');
    const heading = step.querySelector('h4');
    const createCta = step.querySelector('.create-new-bookmark');
    const editCta = step.querySelector('.edit-bookmark-list');
    const cancelCta = step.querySelector('.cancel-create-bookmark');
    const bookmarkDescCta = popupDiv.querySelector('.bookmark-add-desc');
    const subheading = step.querySelector(
      '.efl-learner-profile-bookmark__popup--copy'
    );
    const { createHeading, editHeading } = heading.dataset;
    const { createText, updateText } = subheading.dataset;

    if (option === 'create') {
      heading.innerHTML = createHeading;
      subheading.innerHTML = createText;
      createCta.classList.remove('hidden');
      editCta.classList.add('hidden');
      cancelCta.classList.remove('hidden');
      bookmarkDescCta.classList.remove('hidden');
    } else {
      heading.innerHTML = editHeading;
      subheading.innerHTML = updateText;
      createCta.classList.add('hidden');
      editCta.classList.remove('hidden');
      cancelCta.classList.add('hidden');
      bookmarkDescCta.classList.add('hidden');
    }
  };

  const generateLightBox = (labelId, option) => {
    const createBookmarkSection = document.querySelector(
      '.create-bookmark-list.efl-learner-profile-bookmark'
    );
    const popupDiv = createBookmarkSection.querySelector(
      '.efl-learner-profile-bookmark__popup'
    );

    if (option === 'remove-bookmark') {
      popupDiv.querySelector('.step1').classList.add('hidden');
      popupDiv.querySelector('.step2').classList.add('hidden');
      popupDiv.querySelector('.step3').classList.add('hidden');
      popupDiv.querySelector('.step5').classList.add('hidden');
      popupDiv.querySelector('.step4').classList.remove('hidden');
    } else if (option === 'delete') {
      popupDiv.querySelector('.step1').classList.add('hidden');
      popupDiv.querySelector('.step2').classList.add('hidden');
      popupDiv.querySelector('.step4').classList.add('hidden');
      popupDiv.querySelector('.step5').classList.add('hidden');
      popupDiv.querySelector('.step3').classList.remove('hidden');
    } else if (option !== 'delete') {
      updatePopupDetails(option);
      popupDiv.querySelector('.step1').classList.remove('hidden');
      popupDiv.querySelector('.step2').classList.add('hidden');
      popupDiv.querySelector('.step3').classList.add('hidden');
      popupDiv.querySelector('.step4').classList.add('hidden');
      popupDiv.querySelector('.step5').classList.add('hidden');
    }

    let html = popupDiv.outerHTML;

    html = html.replace(
      'efl-learner-profile-bookmark__popup hidden',
      'efl-learner-profile-bookmark__popup'
    );

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

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

  function getBookmarkListCount() {
    if (localStorage.getItem('bookmarkListData')) {
      const bookmarkListData = JSON.parse(
        localStorage.getItem('bookmarkListData')
      );

      return bookmarkListData.eflBookmarks.length - 1;
    }
    return 0;
  }

  const removeBookmarkItem = e => {
    e.preventDefault();
    const { editBookmarkId } = e.target.closest('section').dataset;
    const { bookmarkPageId } = e.target.closest('.bookmark-item').dataset;

    // eslint-disable-next-line no-use-before-define
    openLightbox(e.target, 'remove-bookmark', bookmarkPageId, editBookmarkId);
  };

  const removeBookmarkItemEvent = () => {
    const bookmarkItems = container.querySelectorAll(
      '.bookmark-item__bookmarkflag'
    );

    bookmarkItems.forEach(item => {
      item.addEventListener('click', removeBookmarkItem);
      item.addEventListener('keydown', event => {
        if (event.keyCode === 13) {
          event.preventDefault();
          item.click('click', removeBookmarkItem);
        }
      });
    });
  };

  const formateBookmarkItem = (sortedJson, target) => {
    const bookmarkItemList = target
      .closest('section')
      .querySelector('.efl-learner-profile-bookmark__details--list');

    bookmarkItemList.innerHTML = '';

    sortedJson.forEach(item => {
      const bookmarkItem = `
        <div class="bookmark-item" data-bookmark-page-id="${item.pageId}">
            <a class="bookmark-item__link" href="${item.bookmarkLink}">
                <div class="bookmark-item__link--img">
                    <img src="${item.bookmarkImage}" alt="" loading="lazy" />
                </div>
                <div class="bookmark-item__link--content">
                    <p>${item.categoryTagName}</p>
                    <h5>${item.bookmarkHeadline}</h5>
                </div>
            </a>
            <button class="bookmark-item__bookmarkflag" aria-label="bookmark flag"></button>
        </div>`;

      bookmarkItemList.insertAdjacentHTML('beforeend', bookmarkItem);
    });
    removeBookmarkItemEvent();
  };

  const sortBookmarkList = target => {
    const sortBy = target.value;
    const selectedBookmark = target
      .closest('section')
      .querySelector('h3.bookmark-list').innerText;
    const bookmarkListData = localStorage.getItem('bookmarkListData');

    // console.log(sortBy);

    if (bookmarkListData) {
      const bookmarkListJson = JSON.parse(bookmarkListData);
      let sortedJson = [];

      // console.log(selectedBookmark);
      bookmarkListJson.eflBookmarks.forEach(bookmark => {
        if (
          bookmark.tag === selectedBookmark ||
          (bookmark.tag === '' &&
            selectedBookmark.toLowerCase() === 'my bookmark list')
        ) {
          const sortBookmarkJson = [];
          const articleJson = [];
          const sessionJson = [];

          sortedJson = [];

          sortBookmarkJson.push(bookmark.bookmarks);

          // console.log(sortBookmarkJson);

          if (sortBy === 'Articles') {
            sortBookmarkJson[0].forEach(item => {
              if (item.categoryTagName === 'Article') {
                articleJson.push(item);
              } else {
                sessionJson.push(item);
              }
            });

            sortedJson = articleJson.concat(sessionJson);
          } else if (sortBy === 'Sessions') {
            sortBookmarkJson[0].forEach(item => {
              if (item.categoryTagName === 'Session') {
                sessionJson.push(item);
              } else {
                articleJson.push(item);
              }
            });

            sortedJson = sessionJson.concat(articleJson);
          } else if (sortBy === 'All') {
            // eslint-disable-next-line prefer-destructuring
            sortedJson = sortBookmarkJson[0];
          }

          // console.log(sortedJson);
        }
      });

      formateBookmarkItem(sortedJson, target);
    }
  };

  const toolTipEvent = () => {
    const bookmarkListSection = container.querySelectorAll(
      '.efl-learner-profile-bookmark'
    );

    if (window.innerWidth >= MOBILE_BREAKPOINT) {
      // bookmark function for desktop
      bookmarkListSection.forEach(list => {
        const dotcta = list.querySelector('.efl-learner-profile__section--dot');
        const editcta = list.querySelector(
          '.efl-learner-profile-bookmark__list--manage .edit-list'
        );
        const deletecta = list.querySelector(
          '.efl-learner-profile-bookmark__list--manage .delete-list'
        );
        const sortby = list.querySelector(
          '.efl-learner-profile__section--sort__link'
        );
        const dropdownListItems = list.querySelectorAll(
          '.efl-learner-profile__section--sort__list li'
        );
        const select = list.querySelector(
          '.efl-learner-profile__section--sort__select'
        );
        const dropdown = list.querySelector(
          '.efl-learner-profile__section--sort__list'
        );

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

            if (e.target.nextElementSibling.classList.contains('hidden')) {
              e.target.nextElementSibling.classList.remove('hidden');
              e.target.setAttribute('aria-expanded', 'true');
              setTimeout(() => {
                editcta.focus();
              }, 50);
            }
          });

          dotcta.addEventListener('keydown', event => {
            if (event.keyCode === 13) {
              dotcta.click();
            } else if (event.keyCode === 27) {
              if (!dotcta.nextElementSibling.classList.contains('hidden')) {
                dotcta.nextElementSibling.classList.add('hidden');
                dotcta.setAttribute('aria-expanded', 'false');
              }
            }

            setTimeout(() => {
              editcta.focus();
            }, 10);
          });

          dotcta.addEventListener('mouseover', e => {
            e.target.nextElementSibling.classList.remove('hidden');
            e.target.nextElementSibling.addEventListener('mouseover', event => {
              event.target.classList.add('active');
            });
            e.target.nextElementSibling.addEventListener(
              'mouseleave',
              event => {
                event.target.classList.remove('active');
                e.target.nextElementSibling.classList.add('hidden');
              }
            );
          });

          dotcta.addEventListener('mouseleave', e => {
            setTimeout(() => {
              if (!e.target.nextElementSibling.classList.contains('active')) {
                e.target.nextElementSibling.classList.add('hidden');
              }
            }, 500);
          });
        }

        if (editcta) {
          editcta.addEventListener('click', e => {
            e.preventDefault();
            const div = e.target.closest('.efl-learner-profile-bookmark__list');
            const title = div.querySelector('.bookmark-list').innerHTML;
            const { editBookmarkId } = e.target.closest('section').dataset;

            // eslint-disable-next-line no-use-before-define
            openLightbox(editcta, 'edit', title, editBookmarkId);
          });

          editcta.addEventListener('keydown', event => {
            if (event.keyCode === 13) {
              editcta.click();
            } else if (event.keyCode === 27) {
              if (!dotcta.nextElementSibling.classList.contains('hidden')) {
                dotcta.nextElementSibling.classList.add('hidden');
                dotcta.setAttribute('aria-expanded', 'false');
                setTimeout(() => {
                  dotcta.focus();
                }, 10);
              }
            }
          });
        }

        if (deletecta) {
          deletecta.addEventListener('click', e => {
            e.preventDefault();
            const { editBookmarkId } = e.target.closest('section').dataset;

            // eslint-disable-next-line no-use-before-define
            openLightbox(deletecta, 'delete', '', editBookmarkId);
          });

          deletecta.addEventListener('keyup', event => {
            if (event.keyCode === 13) {
              deletecta.click();
            } else if (event.keyCode === 27) {
              if (!dotcta.nextElementSibling.classList.contains('hidden')) {
                dotcta.nextElementSibling.classList.add('hidden');
                dotcta.setAttribute('aria-expanded', 'false');
                setTimeout(() => {
                  dotcta.focus();
                }, 10);
              }
            }
          });
        }

        if (sortby) {
          sortby.addEventListener('click', e => {
            e.preventDefault();
            dropdown.setAttribute('aria-expanded', 'true');
          });

          const closeList = () => {
            // selectDiv.classList.remove('active');
            dropdown.setAttribute('aria-expanded', 'false');
          };

          const setSelectedListItem = e => {
            const { target } = e;

            // selectDiv.innerText = target.getAttribute('data-value');
            dropdownListItems.forEach(item => {
              item.classList.remove('active');
            });
            select.value = target.getAttribute('data-value');
            target.classList.add('active');
            select.dispatchEvent(new Event('change'));
          };

          dropdownListItems.forEach(item => {
            item.addEventListener('click', e => {
              setSelectedListItem(e);
              closeList();
            });
            item.addEventListener('keydown', event => {
              if (event.keyCode === 13) {
                item.click();
              }
            });
          });

          select.addEventListener('change', event => {
            const { target } = event;

            sortby.querySelector('span').innerText = target.value;

            sortBookmarkList(target);
          });
        }
      });

      document.addEventListener('click', e => {
        if (!e.target.closest('.efl-learner-profile__section--sort')) {
          const bookmarkSort = document.querySelector(
            '.efl-learner-profile-bookmark:not(.hidden)'
          );

          if (bookmarkSort) {
            const sortDropDown = bookmarkSort.querySelector(
              '.efl-learner-profile__section--sort__list'
            );

            if (sortDropDown) {
              sortDropDown.setAttribute('aria-expanded', 'false');
            }
          }
        }

        if (
          !(
            e.target.closest('.efl-learner-profile-bookmark__list--manage') ||
            e.target.closest('.efl-learner-profile__section--dot')
          )
        ) {
          bookmarkListSection.forEach(list => {
            const tooltip = list.querySelector(
              '.efl-learner-profile-bookmark__list--manage'
            );
            const dotcta = list.querySelector(
              '.efl-learner-profile__section--dot'
            );

            if (tooltip) {
              dotcta.nextElementSibling.classList.add('hidden');
              dotcta.setAttribute('aria-expanded', 'false');
            }
          });
        }
      });
    } else {
      // bookmark function for mobile
      bookmarkListSection.forEach(list => {
        const dotcta = list.querySelector('.efl-learner-profile__section--dot');
        const editcta = list.querySelector(
          '.efl-learner-profile-bookmark__list--manage .edit-list'
        );
        const deletecta = list.querySelector(
          '.efl-learner-profile-bookmark__list--manage .delete-list'
        );
        const select = list.querySelector(
          '.efl-learner-profile__section--sort__select'
        );
        const sortby = list.querySelector(
          '.efl-learner-profile__section--sort__link'
        );

        if (dotcta) {
          dotcta.addEventListener('click', e => {
            e.preventDefault();
            document.body.classList.add('efl-profile-dark-overlay');
            e.target.nextElementSibling.classList.remove('hidden');
            e.target.setAttribute('aria-expanded', 'true');
            setTimeout(() => {
              e.target.nextElementSibling.classList.add('add-animation');
              editcta.focus();
            }, 50);
          });

          dotcta.addEventListener('keydown', event => {
            if (event.keyCode === 13) {
              dotcta.click();
            } else if (event.keyCode === 27) {
              if (!dotcta.nextElementSibling.classList.contains('hidden')) {
                document.body.classList.remove('efl-profile-dark-overlay');
                dotcta.nextElementSibling.classList.add('hidden');
                dotcta.setAttribute('aria-expanded', 'false');
                setTimeout(() => {
                  dotcta.nextElementSibling.classList.remove('add-animation');
                  dotcta.focus();
                }, 50);
              }
            }
          });
        }

        if (editcta) {
          editcta.addEventListener('click', e => {
            e.preventDefault();
            const div = e.target.closest('.efl-learner-profile-bookmark__list');
            const title = div.querySelector('.bookmark-list').innerHTML;
            const { editBookmarkId } = e.target.closest('section').dataset;

            // eslint-disable-next-line no-use-before-define
            openLightbox(editcta, 'edit', title, editBookmarkId);
            setTimeout(() => {
              editcta.focus();
            }, 10);
          });

          editcta.addEventListener('keydown', event => {
            if (event.keyCode === 13) {
              editcta.click();
            } else if (event.keyCode === 27) {
              if (!dotcta.nextElementSibling.classList.contains('hidden')) {
                document.body.classList.remove('efl-profile-dark-overlay');
                dotcta.nextElementSibling.classList.add('hidden');
                dotcta.setAttribute('aria-expanded', 'false');
                setTimeout(() => {
                  dotcta.nextElementSibling.classList.remove('add-animation');
                  dotcta.focus();
                }, 50);
              }
            }
          });
        }

        if (deletecta) {
          deletecta.addEventListener('click', e => {
            e.preventDefault();
            const { editBookmarkId } = e.target.closest('section').dataset;

            // eslint-disable-next-line no-use-before-define
            openLightbox(deletecta, 'delete', '', editBookmarkId);
          });

          deletecta.addEventListener('keyup', event => {
            if (event.keyCode === 13) {
              deletecta.click();
            } else if (event.keyCode === 27) {
              if (!dotcta.nextElementSibling.classList.contains('hidden')) {
                document.body.classList.remove('efl-profile-dark-overlay');
                dotcta.nextElementSibling.classList.add('hidden');
                dotcta.setAttribute('aria-expanded', 'false');
                setTimeout(() => {
                  dotcta.nextElementSibling.classList.remove('add-animation');
                  dotcta.focus();
                }, 50);
              }
            }
          });
        }

        if (select) {
          select.addEventListener('change', event => {
            const { target } = event;

            sortby.querySelector('span').innerText = target.value;
            sortBookmarkList(target);
          });
        }
      });

      document.addEventListener('click', e => {
        if (
          !(
            e.target.closest('.efl-learner-profile-bookmark__list--manage') ||
            e.target.closest('.efl-learner-profile__section--dot')
          )
        ) {
          document.body.classList.remove('efl-profile-dark-overlay');
          bookmarkListSection.forEach(list => {
            const tooltip = list.querySelector(
              '.efl-learner-profile-bookmark__list--manage'
            );
            const dotcta = list.querySelector(
              '.efl-learner-profile__section--dot'
            );

            if (tooltip) {
              tooltip.classList.remove('add-animation');
              dotcta.setAttribute('aria-expanded', 'false');
              setTimeout(() => {
                tooltip.classList.add('hidden');
              }, 300);
            }
          });
        }
      });
    }
  };

  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');
  };

  function generateBookmarkSection(
    listName,
    listDesc,
    articleLink,
    sessionLink
  ) {
    const bookmarkListCount = getBookmarkListCount();
    const bookmarkHtml = `
      <section class="efl-learner-profile__section bookmark-list efl-learner-profile-bookmark" data-behavior="create-bookmark-list" data-edit-bookmark-id="${bookmarkListCount}">
          <div class="efl-learner-profile-bookmark__list">
              <div class="efl-learner-profile__section--header">
                  <h3 class="bookmark-list">${listName}</h3>
                  <button aria-label="edit or delete bookmark of ${listName}" class="efl-learner-profile__section--dot"></button>
                  <div class="efl-learner-profile-bookmark__list--manage hidden">
                      <button class="edit-list" aria-label="edit bookmark list">Rename list</button>
                      <button class="delete-list" aria-label="delete bookmark list">Delete list</button>
                  </div>
              </div>
              <div class="efl-learner-profile__section--nocourse-copy no-bookmark-list">
                  This list is empty. To add content, check out our <a href="${articleLink}">articles</a> and <a href="${sessionLink}">sessions</a> pages.
              </div>
          </div>
      </section>`;

    /* const wrapper = document.createElement('div');
    const childEle = container.querySelector('*:nth-child(3)');
    wrapper.innerHTML= bookmarkHtml;
    console.log(wrapper.firstChild); */

    container.insertAdjacentHTML('beforeend', bookmarkHtml);
    // container.insertBefore(wrapper.innerHTML, container.querySelector('*:nth-child(3)'));
    // container.insertBefore(wrapper.firstChild, container.nextSibling);
  }

  const cardGridStyle = () => {
    bookmarkList.forEach(list => {
      const item = list.querySelector('.efl-learner-profile-bookmark__items');

      if (item) {
        const image = item.querySelectorAll(
          '.efl-learner-profile-bookmark__items--img'
        ).length;

        item.className = 'efl-learner-profile-bookmark__items';
        item.classList.add(`card-${image}`);
      }
    });
  };

  async function updateBookmarkListCallback(updateBookmark) {
    // console.log(oldBookmark);

    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(updateBookmark),
    });

    return response.json();
  }

  function updateBookmarkList(
    listName,
    listDesc,
    type,
    editId,
    removeItemId,
    articleLink,
    sessionLink,
    saveButton
  ) {
    try {
      let oldBookmark = [];
      let updateBookmark = [];

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

      if (type === 'add') {
        const newBookmarkDetail = `{
          "tag": "${listName}",
          "description": "${listDesc}",
          "bookmarks": []
          }`;

        // console.log(oldBookmark);
        if (localStorage.getItem('bookmarkListData')) {
          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": "${fanid}",
              "eflBookmarks": [${newBookmarkDetail}]
            }
          }`;

          oldBookmark = JSON.parse(defaultBookmark);
          updateBookmark = JSON.parse(defaultBookmark);
        }
      } else if (type === 'update') {
        oldBookmark = JSON.parse(localStorage.getItem('bookmarkListData'));
        updateBookmark = JSON.parse(
          localStorage.getItem('bookmarkListUpdateData')
        );
        oldBookmark.eflBookmarks[editId].tag = listName;
        updateBookmark.eflBookmarks[editId].tag = listName;
      } else if (type === 'delete') {
        oldBookmark = JSON.parse(localStorage.getItem('bookmarkListData'));
        updateBookmark = JSON.parse(
          localStorage.getItem('bookmarkListUpdateData')
        );
        oldBookmark.eflBookmarks.splice(editId, 1);
        updateBookmark.eflBookmarks.splice(editId, 1);
      } else if (type === 'remove-bookmark') {
        oldBookmark = JSON.parse(localStorage.getItem('bookmarkListData'));
        updateBookmark = JSON.parse(
          localStorage.getItem('bookmarkListUpdateData')
        );
        // console.log(oldBookmark);
        oldBookmark.eflBookmarks[editId].bookmarks.forEach((e, i) => {
          if (e.pageId === removeItemId) {
            oldBookmark.eflBookmarks[editId].bookmarks.splice(i, 1);
          }
        });

        updateBookmark.eflBookmarks[editId].bookmarks.forEach((e, i) => {
          if (e.pageId === removeItemId) {
            updateBookmark.eflBookmarks[editId].bookmarks.splice(i, 1);
          }
        });
        updateBookmark.eflBookmarks[editId].bookmarks.filter(
          e => e.pageId !== removeItemId
        );
        // console.log(oldBookmark);
      }

      // isAjaxRuning = true;
      updateBookmarkListCallback(
        updateBookmark
        // eslint-disable-next-line complexity
      ).then(response => {
        if (
          response &&
          response.FAIWFResponse &&
          response.FAIWFResponse.IsAbusive
        ) {
          if (type === 'add' || type === 'update') {
            swithScreen('step5');
            saveButton.classList.remove('loading-bar');
            saveButton.setAttribute('aria-disabled', 'false');
          }
        } else if (response && !response.FAIWFResponse && response.Error) {
          if (type === 'add' || type === 'update') {
            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)
          );

          if (type === 'add') {
            generateBookmarkSection(
              listName,
              listDesc,
              articleLink,
              sessionLink
            );
            toolTipEvent();
            removeLightBox();
          } else if (type === 'update') {
            const section = document.querySelector(
              `.efl-learner-profile-bookmark[data-edit-bookmark-id="${editId}"]`
            );
            const viewDetails = section.querySelector(
              '.efl-learner-profile-bookmark__details'
            );

            section.querySelector('h3.bookmark-list').innerText = listName;

            if (viewDetails) {
              viewDetails.querySelector(
                'h3.bookmark-list'
              ).innerText = listName;
            }

            removeLightBox();
          } else if (type === 'delete') {
            const section = document.querySelector(
              `.efl-learner-profile-bookmark[data-edit-bookmark-id="${editId}"]`
            );

            section.remove();

            // reset edit section id
            const bookmarkSection = container.querySelectorAll(
              '.efl-learner-profile-bookmark'
            );

            bookmarkSection.forEach((list, index) => {
              if (index) {
                list.setAttribute('data-edit-bookmark-id', index - 1);
              }
            });

            toolTipEvent();
            removeLightBox();
          } else if (type === 'remove-bookmark') {
            const bookmarkListSection = container.querySelector(
              `.efl-learner-profile-bookmark[data-edit-bookmark-id="${editId}"]`
            );
            const bookmarkListItem = bookmarkListSection.querySelector(
              `.bookmark-item[data-bookmark-page-id="${removeItemId}"]`
            );
            const bookmarkImg = bookmarkListSection.querySelector(
              `.efl-learner-profile-bookmark__items--img[data-bookmark-page-id="${removeItemId}"]`
            );

            bookmarkListItem.classList.add('removing');
            setTimeout(() => {
              bookmarkListItem.remove();
              if (bookmarkImg) {
                bookmarkImg.remove();
                // eslint-disable-next-line no-unused-vars
                cardGridStyle();
              }
            }, 400);
          }
        }
      });
    } catch (e) {
      if (saveButton) {
        saveButton.classList.remove('loading-bar');
        saveButton.setAttribute('aria-disabled', 'false');
      }
      throw new Error('Unable to update bookmark data ::', e);
    }
  }

  const findPos = obj => {
    // eslint-disable-next-line no-unused-vars
    let curleft = 0;
    let curtop = 0;

    if (obj.offsetParent) {
      curleft = obj.offsetLeft;
      curtop = obj.offsetTop;

      // eslint-disable-next-line no-param-reassign, no-cond-assign
      while ((obj = obj.offsetParent)) {
        curleft += obj.offsetLeft;
        curtop += obj.offsetTop;
      }
    }
    return curtop;
  };

  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 removeBookmarkListItem = (bookmarkPageId, editBookmarkId) => {
    updateBookmarkList(
      '',
      '',
      'remove-bookmark',
      editBookmarkId,
      bookmarkPageId,
      '',
      '',
      ''
    );
  };

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

    if (document.getElementById(DIALOG_ID)) {
      return;
    }

    lightboxContainer.innerHTML = generateLightBox(
      {
        labelId: focusBtn.getAttribute('id'),
      },
      option
    );
    document.body.appendChild(lightboxContainer);
    // eslint-disable-next-line no-new
    new Dialog({
      dialogId: DIALOG_ID,
      focusAfterClosed: focusBtn,
      focusFirst: 'close',
      closeCallBack: () => removeLightBox(),
    });

    const createList = lightboxContainer.querySelector('.create-new-bookmark');
    const cancelList = lightboxContainer.querySelector(
      '.cancel-create-bookmark'
    );
    const bookmarkName = lightboxContainer.querySelector('.bookmark-list-name');
    const bookmarkDescCta = lightboxContainer.querySelector(
      '.bookmark-add-desc'
    );
    const editBookmarkCta = lightboxContainer.querySelector(
      '.edit-bookmark-name'
    );
    const errorBookmarkCta = lightboxContainer.querySelector(
      '.error-bookmark-name'
    );
    const serverErrorBookmarkCta = lightboxContainer.querySelector(
      '.server-error-bookmark'
    );
    const deleteBookmarkCta = lightboxContainer.querySelector(
      '.delete-bookmark-list'
    );
    const cancelDeleteCta = lightboxContainer.querySelector(
      '.cancel-bookmark-delete'
    );
    const updateBookmarkCta = lightboxContainer.querySelector(
      '.edit-bookmark-list'
    );
    const removeBookmarkCta = lightboxContainer.querySelector(
      '.remove-bookmark-item'
    );
    const cancelRemoveBookmarkCta = lightboxContainer.querySelector(
      '.cancel-remove-bookmark'
    );
    const bookmarkDesc = lightboxContainer.querySelector(
      '.bookmark-desc-wrapper'
    );
    const { addText, cancelText } = bookmarkDescCta.dataset;
    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 popupForm = lightboxContainer.querySelector(
      '.efl-learner-profile-bookmark__popup'
    );
    const articleLink = lightboxContainer.querySelector(
      '.bookmark-list-article-link'
    ).value;
    const sessionLink = lightboxContainer.querySelector(
      '.bookmark-list-session-link'
    ).value;

    bookmarkName.value = title;
    bookmarkName.focus();
    popupForm.setAttribute('data-edit-id', updateId);

    if (bookmarkDescCta) {
      bookmarkDescCta.addEventListener('click', e => {
        e.preventDefault();
        bookmarkDesc.classList.toggle('hidden');
        if (bookmarkDesc.classList.contains('hidden')) {
          bookmarkDescCta.innerText = addText;
          bookmarkDescCta.ariaLabel = `${addText} button`;
        } else {
          bookmarkDescCta.innerText = cancelText;
          bookmarkDescCta.ariaLabel = `${cancelText} button`;
          listDesc.value = '';
        }
      });
      bookmarkDescCta.addEventListener('keydown', event => {
        if (event.keyCode === 13) {
          event.preventDefault();
          bookmarkDescCta.click();
        }
      });
    }

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

    listName.addEventListener('keydown', event => {
      if (event.shiftKey && event.keyCode === 9) {
        event.preventDefault();
      }
    });

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

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

      if (e.target.getAttribute('aria-disabled') === 'true') {
        return;
      }

      const name = listName.value;

      if (checkNameExist(name)) {
        swithScreen('step2');
      } else {
        updateBookmarkList(
          name,
          listDesc.value,
          'add',
          0,
          0,
          articleLink,
          sessionLink,
          createList
        );
      }

      createBookmark.focus();
    });

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

      if (e.target.getAttribute('aria-disabled') === 'true') {
        return;
      }

      const { editId } = popupForm.dataset;

      updateBookmarkList(
        listName.value,
        listDesc.value,
        'update',
        editId,
        0,
        '',
        '',
        updateBookmarkCta
      );
      createBookmark.focus();
    });

    updateBookmarkCta.addEventListener('keydown', event => {
      if (event.shiftKey && event.keyCode === 9) {
        // empty
      } else if (event.keyCode === 9) {
        event.preventDefault();
        bookmarkName.focus();
      } else if (event.keyCode === 13) {
        updateBookmarkCta.click();
      }
    });

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

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

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

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

    cancelList.addEventListener('keydown', event => {
      if (event.shiftKey && event.keyCode === 9) {
        // empty
      } else if (event.keyCode === 9) {
        event.preventDefault();
        listName.focus();
      } else if (event.keyCode === 13) {
        cancelList.click();
      }
    });

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

    if (deleteBookmarkCta) {
      deleteBookmarkCta.focus();
    }

    deleteBookmarkCta.addEventListener('click', e => {
      e.preventDefault();
      const { editId } = popupForm.dataset;

      updateBookmarkList(
        listName,
        listDesc,
        'delete',
        editId,
        0,
        '',
        '',
        deleteBookmarkCta
      );
      createBookmark.focus();
    });

    deleteBookmarkCta.addEventListener('keydown', event => {
      if (event.shiftKey && event.keyCode === 9) {
        event.preventDefault();
      } else if (event.keyCode === 13) {
        deleteBookmarkCta.click();
      }
    });

    cancelDeleteCta.addEventListener('click', e => {
      e.preventDefault();
      removeLightBox();
      createBookmark.focus();
    });

    cancelDeleteCta.addEventListener('keydown', event => {
      if (event.keyCode === 9) {
        event.preventDefault();
        deleteBookmarkCta.focus();
      } else if (event.keyCode === 13) {
        event.preventDefault();
        cancelDeleteCta.click();
      }
    });

    removeBookmarkCta.focus();
    removeBookmarkCta.addEventListener('click', e => {
      e.preventDefault();

      console.log(title);
      console.log(updateId);
      removeBookmarkListItem(title, updateId);
      removeLightBox();
      backCta.focus();
    });

    removeBookmarkCta.addEventListener('keydown', event => {
      if (event.shiftKey && event.keyCode === 9) {
        event.preventDefault();
      } else if (event.keyCode === 13) {
        removeBookmarkCta.click();
      }
    });

    cancelRemoveBookmarkCta.addEventListener('click', e => {
      e.preventDefault();
      removeLightBox();
      backCta.focus();
    });

    cancelRemoveBookmarkCta.addEventListener('keydown', event => {
      if (event.keyCode === 9) {
        event.preventDefault();
        removeBookmarkCta.focus();
      } else if (event.keyCode === 13) {
        cancelRemoveBookmarkCta.click();
      }
    });
  };

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

  if (viewList) {
    viewList.forEach(viewListCta => {
      viewListCta.addEventListener('click', e => {
        e.preventDefault();
        const detail = e.target.closest('.efl-learner-profile__section');
        const bookmarkContainer = container.querySelectorAll(
          '.efl-learner-profile-bookmark'
        );

        bookmarkContainer.forEach(list => {
          list.classList.add('hidden');
        });
        e.target
          .closest('.efl-learner-profile__section')
          .classList.remove('hidden');
        detail
          .querySelector('.efl-learner-profile-bookmark__list')
          .classList.add('hidden');
        detail
          .querySelector('.efl-learner-profile-bookmark__details')
          .classList.remove('hidden');
        container.classList.add('bookmark-back');
        backCta.classList.remove('hidden');

        window.scroll(0, findPos(backCta) - 115);
        setTimeout(() => {
          backCta.focus();
        }, 50);
      });
    });
  }

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

      container.classList.remove('bookmark-back');
      backCta.classList.add('hidden');
      bookmarkList.forEach(list => {
        list.classList.remove('hidden');
        if (!list.classList.contains('create-bookmark-list')) {
          if (list.querySelector('.efl-learner-profile-bookmark__list')) {
            list
              .querySelector('.efl-learner-profile-bookmark__list')
              .classList.remove('hidden');
          }
          if (list.querySelector('.efl-learner-profile-bookmark__details')) {
            list
              .querySelector('.efl-learner-profile-bookmark__details')
              .classList.add('hidden');
          }
        }
      });
      window.scroll(0, 0);
      createBookmark.focus();
    });

    backCta.addEventListener('keydown', event => {
      if (event.keyCode === 13) {
        backCta.click();
      }
    });
  }

  cardGridStyle();
  toolTipEvent();
  removeBookmarkItemEvent();
};