Efl Learner Profile Settings

import { updatePlayerProfile } from '../efl-learner-profile/efl-learner-profile-update';

export default parentElement => {
  const enterLocationSection = parentElement.querySelector(
    '.efl-learner-profile-settings--enter-location'
  );
  const privacy = parentElement.querySelector('#learner-profile-privacy-check');
  const availability = parentElement.querySelector(
    '#learner-profile-availability-check'
  );
  const availabilityDropdown = parentElement.querySelector(
    '.efl-learner-profile-settings__select'
  );
  const dropdownDiv = parentElement.querySelector(
    '.efl-learner-profile-settings__select--label'
  );
  const dropdown = parentElement.querySelector(
    '.efl-learner-profile-settings__select--list'
  );
  const select = parentElement.querySelector(
    '.efl-learner-profile-settings__select--select'
  );
  const dropdownListItems = dropdown.querySelectorAll('li');
  const MOBILE_BREAKPOINT = 820;
  const learnerLocation = parentElement.querySelector(
    '#learner-profile-location'
  );
  const map = parentElement.querySelector('.MicrosoftMap');
  const searchBox = parentElement.querySelector('#bioSettingLocation');
  const searchPlace = parentElement.querySelector('.learner-profile-place');
  const roleSelect = document.querySelector('.efl-profile__select');
  // Accessibility
  const socialLink = parentElement.querySelector(
    '.efl-learner-profile__social-links__list div:last-child a'
  );

  const setSelectedListItem = e => {
    const { target } = e;
    const distDiv = target.closest('.efl-learner-profile-settings__select');
    const selectDiv = distDiv.querySelector(
      '.efl-learner-profile-settings__select--label span.filter'
    );

    selectDiv.innerText = target.innerText;
    select.value = target.getAttribute('data-value');
    select.dispatchEvent(new Event('change'));

    if (roleSelect) {
      const profileDropdownDiv = roleSelect.querySelector(
        '.efl-profile__select--label span.filter'
      );
      const profileSelect = roleSelect.querySelector(
        '.efl-profile__select--select'
      );

      profileDropdownDiv.innerText = target.innerText;
      profileSelect.value = target.getAttribute('data-value');
    }
  };

  const closeList = event => {
    const { target } = event;
    const distDiv = target.closest('.efl-learner-profile-settings__select');
    const selectDiv = distDiv.querySelector(
      '.efl-learner-profile-settings__select--label'
    );

    selectDiv.classList.remove('active');
    selectDiv.setAttribute('aria-expanded', 'false');
    dropdown.setAttribute('aria-expanded', 'false');
  };

  dropdownDiv.addEventListener('click', e => {
    const { target } = e;
    const distDiv = target.closest('.efl-learner-profile-settings__select');
    const selectDiv = distDiv.querySelector(
      '.efl-learner-profile-settings__select--label'
    );

    if (window.innerWidth >= MOBILE_BREAKPOINT) {
      const isExpanded = dropdown.getAttribute('aria-expanded') === 'true';

      if (!isExpanded) {
        dropdown.setAttribute('aria-expanded', 'true');
        selectDiv.setAttribute('aria-expanded', 'true');
        selectDiv.classList.add('active');
      } else {
        dropdown.setAttribute('aria-expanded', 'false');
        selectDiv.setAttribute('aria-expanded', 'false');
        selectDiv.classList.remove('active');
      }
    }
  });

  dropdownDiv.addEventListener('keydown', event => {
    if (event.keyCode === 13) {
      event.preventDefault();
      dropdownDiv.click();
    } else if (event.keyCode === 40) {
      dropdownListItems[0].focus();
    }
  });

  dropdownListItems.forEach((item, index) => {
    item.addEventListener('click', e => {
      setSelectedListItem(e);
      closeList(e);
      dropdownDiv.focus();
    });

    item.addEventListener('keydown', e => {
      if (e.keyCode === 40) {
        if (dropdownListItems[index + 1]) {
          dropdownListItems[index + 1].focus();
        }
      } else if (e.keyCode === 38) {
        if (dropdownListItems[index - 1]) {
          dropdownListItems[index - 1].focus();
        }
      } else if (e.keyCode === 13) {
        item.click();
      } else if (e.keyCode === 27) {
        dropdownDiv.click();
        dropdownDiv.focus();
      }
    });
  });

  select.addEventListener('change', event => {
    const { target } = event;
    const distDiv = target.closest('.efl-learner-profile-settings__select');
    const selectDiv = distDiv.querySelector(
      '.efl-learner-profile-settings__select--label span.filter'
    );
    const selectDivParent = distDiv.querySelector(
      '.efl-profile__select--label'
    );

    setTimeout(() => {
      target.classList.remove('active');
      selectDiv.innerText = target.options[target.selectedIndex].value;

      if (roleSelect) {
        const profileDropdownDiv = roleSelect.querySelector(
          '.efl-profile__select--label span.filter'
        );
        const profileSelect = roleSelect.querySelector(
          '.efl-profile__select--select'
        );

        profileDropdownDiv.innerText =
          target.options[target.selectedIndex].innerText;
        profileSelect.value = target.value;
      }

      updatePlayerProfile();
      if (selectDivParent) {
        selectDivParent.focus();
      }
    }, 100);
  });

  select.addEventListener('click', event => {
    const { target } = event;
    const distDiv = target.closest('.efl-profile__select');
    const selectDiv = distDiv.querySelector(
      '.efl-profile__select--label span.filter'
    );

    if (select.classList.contains('active')) {
      selectDiv.setAttribute('aria-expanded', 'false');
      selectDiv.classList.remove('active');
      target.classList.remove('active');
    } else {
      selectDiv.setAttribute('aria-expanded', 'true');
      selectDiv.classList.add('active');
      target.classList.add('active');
    }
  });

  function loadMapScenario() {
    function selectedSuggestion(suggestionResult) {
      // eslint-disable-next-line  no-unused-vars
      const { location, formattedSuggestion } = suggestionResult;
      // eslint-disable-next-line  no-unused-vars
      const { longitude, latitude } = location;
      const profileUpdatedLocation = document.querySelector(
        '.efl-profile-hero-banner__content--profile__location'
      );

      searchPlace.value = formattedSuggestion;
      searchBox.classList.add('location-added');

      if (profileUpdatedLocation) {
        profileUpdatedLocation.innerText = formattedSuggestion;
      }

      updatePlayerProfile();
    }

    function searchLoad() {
      const options = { maxResults: 3 };
      const manager = new window.Microsoft.Maps.AutosuggestManager(options);

      manager.attachAutosuggest(
        `#bioSettingLocation`,
        `#bioSettingLocationContainer`,
        selectedSuggestion
      );
    }

    function onError(message) {
      // eslint-disable-next-line  no-console
      console.log(message);
    }

    const mapIntervel = setInterval(() => {
      if (window.Microsoft.Maps.loadModule) {
        window.Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', {
          callback: searchLoad,
          errorCallback: onError,
        });
        clearInterval(mapIntervel);
      }
    }, 100);
  }

  const loadBingMapSerch = () => {
    const tag = document.createElement('script');
    // eslint-disable-next-line no-undef
    const mapScriptUrl = `//www.bing.com/api/maps/mapcontrol?key=${bingMapKey}`;

    tag.setAttribute('defer', '');
    tag.setAttribute('async', '');
    tag.setAttribute('type', 'text/javascript');
    tag.setAttribute('src', mapScriptUrl);
    const firstScriptTag = document.getElementsByTagName('script')[0];

    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    tag.onload = () => {
      loadMapScenario();
    };
  };

  privacy.addEventListener('click', e => {
    const labelText = e.target.closest('section').querySelector('p');
    const { privacyOnText, privacyOffText } = labelText.dataset;

    if (!privacy.checked) {
      labelText.innerText = privacyOffText;
    } else {
      labelText.innerText = privacyOnText;
    }
    updatePlayerProfile();
  });

  privacy.addEventListener('keyup', event => {
    if (event.keyCode === 13) {
      // Cancel the default action, if needed
      event.preventDefault();
      privacy.click();
    }
  });

  availability.addEventListener('click', e => {
    const labelText = e.target.closest('section').querySelector('p');
    const { availabilityOnText, availabilityOffText } = labelText.dataset;

    if (!availability.checked) {
      availabilityDropdown.classList.add('hidden');
      labelText.innerText = availabilityOffText;
    } else {
      availabilityDropdown.classList.remove('hidden');
      labelText.innerText = availabilityOnText;
    }
    updatePlayerProfile();
  });

  availability.addEventListener('keyup', event => {
    if (event.keyCode === 13) {
      // Cancel the default action, if needed
      event.preventDefault();
      availability.click();
    }
  });

  learnerLocation.addEventListener('click', e => {
    const labelText = e.target.closest('section').querySelector('p');
    const { locationOnText, locationOffText } = labelText.dataset;

    if (!learnerLocation.checked) {
      searchPlace.value = '';
      searchBox.value = '';
      searchBox.classList.remove('location-added');
      enterLocationSection.classList.add('hidden');
      labelText.innerText = locationOffText;
    } else {
      enterLocationSection.classList.remove('hidden');
      labelText.innerText = locationOnText;
    }
    updatePlayerProfile();
  });

  learnerLocation.addEventListener('keyup', event => {
    if (event.keyCode === 13) {
      // Cancel the default action, if needed
      event.preventDefault();
      learnerLocation.click();
    }
  });

  if (socialLink) {
    socialLink.addEventListener('keydown', event => {
      const { target } = event;
      const closestDiv = target.closest('.efl-profile-left-popup');
      const closeBtn = closestDiv.querySelector(
        '.efl-profile-left-popup__close'
      );

      if (event.keyCode === 9) {
        setTimeout(() => {
          closeBtn.focus();
        }, 50);
      }
    });
  }

  if (!map && searchBox) {
    loadBingMapSerch();
  }
};