Course Availability Pro Level

import { Dialog } from '../lightbox-overlay/lightbox-overlay';
import courseVenueItem from '../course-venue-result/individual/course-venue-individual';

export default parentElement => {
  const DIALOG_ID = 'pro-level-courses-dialog';
  const {
    courseName,
    courseBlockid,
    courseIsprocourse,
  } = parentElement.dataset;
  const headers = {
    // 'Ocp-Apim-Subscription-Key': '8279c7fab35f432daf1a0bd395a9ae48',
  };
  const currentBtn = parentElement.querySelector('.pro-level-current-location');
  const locationFound = parentElement.querySelector('.current-location-found');
  const locationNotFound = parentElement.querySelector('.location-not-found');
  const enterLocationCta = parentElement.querySelector(
    '.pro-enter-location-cta'
  );
  const map = parentElement.querySelector('.MicrosoftMap');
  const dropdownDivAll = parentElement.querySelectorAll(
    '.pro-level-location__distance--label'
  );
  const MOBILE_BREAKPOINT = 820;
  const selectAll = parentElement.querySelectorAll(
    '.pro-level-location__distance--select'
  );
  const searchBlock = parentElement.querySelector(
    '.pro-level-location__postcode'
  );
  const searchBox = parentElement.querySelector('#proLevelSearchBox');
  const longitudeInput = parentElement.querySelector('.search-longitude');
  const latitudeInput = parentElement.querySelector('.search-latitude');
  const distanceVal = parentElement.querySelector('.search-distance');
  const searchPlace = parentElement.querySelector('.search-place');
  const searchBtn = parentElement.querySelector('.search-pro-level-course');
  const step1 = parentElement.querySelector('.pro-level-1');
  const step2 = parentElement.querySelector('.pro-level-2');
  const step3 = parentElement.querySelector('.pro-level-3');
  const step4 = parentElement.querySelector('.pro-level-4');
  const step5 = parentElement.querySelector('.pro-level-5');
  const loadMoreCta = parentElement.querySelector(
    '.pro-level-location__show-more'
  );
  const defaultCount = 3;
  let totalPage = 0;
  const htmlClone = parentElement.querySelector('.course-venue-individual');
  const clearBtn = parentElement.querySelector('.pro-level-location__clear');
  const startNewSearch = parentElement.querySelector('.start-new-search');
  let distance1 = true;
  let distance2 = true;
  let distance3 = true;
  let distance4 = true;

  const dateFormater = (dateStr, year) => {
    const stDate = new Date(dateStr);
    const weekday = [
      'Sunday',
      'Monday',
      'Tuesday',
      'Wednesday',
      'Thursday',
      'Friday',
      'Saturday',
    ];
    const month = [
      'Jan',
      'Feb',
      'Mar',
      'Apr',
      'May',
      'Jun',
      'Jul',
      'Aug',
      'Sep',
      'Oct',
      'Nov',
      'Dec',
    ];
    const stDay = weekday[stDate.getDay()];
    const stDt =
      stDate.getDate() > 10 ? stDate.getDate() : `0${stDate.getDate()}`;
    const stMonth = month[stDate.getMonth()];

    if (year) {
      return `${stDay} ${stDt} ${stMonth} ${stDate.getFullYear()}`;
    }
    return `${stDay} ${stDt} ${stMonth}`;
  };

  const numToWord = num => {
    const str = [
      '',
      'One',
      'Two',
      'Three',
      'Four',
      'Five',
      'Six',
      'Seven',
      'Eight',
      'Nine',
      'Ten',
    ];

    return str[num] ? str[num] : num;
  };

  const validateForm = () => {
    if (!longitudeInput.value || !latitudeInput.value || !distanceVal.value) {
      searchBtn.setAttribute('disabled', 'disabled');
      return;
    }
    searchBtn.removeAttribute('disabled');
  };

  const searchByCurrentLocation = target => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        position => {
          longitudeInput.value = position.coords.longitude;
          latitudeInput.value = position.coords.latitude;
          searchPlace.value = '';

          target.querySelector('.loading').remove();
          target.classList.remove('searching');
          target.classList.add('hidden');
          locationFound.classList.remove('hidden');
          locationFound.focus();
          validateForm();
        },
        error => {
          console.log(error);
          target.classList.remove('searching');
          target.querySelector('.loading').remove();
          target.classList.add('hidden');
          locationNotFound.classList.remove('hidden');
          searchBlock.classList.remove('hidden');
        }
      );
    } else {
      // eslint-disable-next-line no-console
      console.log('Geolocation is not supported by this browser.');
    }
  };

  const searchByLocation = event => {
    event.preventDefault();
    const { target } = event;

    if (!target.classList.contains('searching')) {
      target.classList.add('searching');
      target.insertAdjacentHTML(
        'beforeend',
        '<div class="loading"><span class="efl-logo"></span><span class="loader"></span></div>'
      );
    }
    searchByCurrentLocation(target);
  };

  function loadMapScenario() {
    function selectedSuggestion(suggestionResult) {
      // eslint-disable-next-line  no-unused-vars
      const { location, formattedSuggestion } = suggestionResult;
      const { longitude, latitude } = location;

      longitudeInput.value = longitude;
      latitudeInput.value = latitude;
      searchPlace.value = formattedSuggestion;
      searchBox.classList.add('location-added');
      // currentBtn.classList.remove('hidden');
      // locationFound.classList.add('hidden');

      validateForm();
    }

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

      manager.attachAutosuggest(
        `#proLevelSearchBox`,
        `#proLevelSearchBoxContainer`,
        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();
    };
  };

  async function searchVenueCallback(longitude, latitude) {
    // replace url with `/seachVenue/` in development to see results
    // const url = `/Courses/GetAvailableCourses/?postCodeLon=${longitude}
    // &postCodeLat=${latitude}&courseName=${courseName}`;

    let blockid = '';

    if (courseBlockid) {
      blockid = `&blockId=${courseBlockid}`;
    }

    const distance = distanceVal.value;

    const url = `${
      window.location.origin
    }/Courses/GetAvailableCourses/?postCodeLon=${longitude}&postCodeLat=${latitude}&courseName=${courseName}&distance=${distance}&isProCourse=${courseIsprocourse}${blockid}`;
    // eslint-disable-next-line compat/compat
    const response = await fetch(url, {
      headers,
    });

    return response.json();
  }

  const formatVenueList = sortCoursesList => {
    if (sortCoursesList.length) {
      const lists = parentElement.querySelectorAll('.course-venue-individual');

      lists.forEach((list, index) => {
        if (index) {
          list.remove();
        }
      });
      sortCoursesList.forEach(course => {
        const copyHtml = htmlClone.cloneNode(true);
        const listDiv = parentElement.querySelector('.course-venue-list__list');
        const startDate = dateFormater(course.courseStartDate, true);

        copyHtml.classList.remove('hidden');
        copyHtml.querySelector('.venue-dt').innerText = startDate;
        // eslint-disable-next-line radix
        copyHtml.querySelector('.venue-dist').innerText = `${course.distance}M`;
        copyHtml.querySelector('.venue-name').innerText = course.venueName;
        // copyHtml.querySelector('.venue-addr').innerText = course.address;
        const sessionHtml = copyHtml.querySelector(
          '.course-venue-individual__days'
        );

        course.sessions.forEach((session, index) => {
          const sessionsClone = sessionHtml.cloneNode(true);

          // eslint-disable-next-line no-param-reassign
          sessionsClone.querySelector('h3').innerText = `Day ${numToWord(
            index + 1
          )}`;

          const dateStringArray = session.startDate.split(' ');
          const monthStr = dateStringArray[dateStringArray.length - 1].slice(
            0,
            3
          );

          dateStringArray[dateStringArray.length - 1] = monthStr;

          const formattedDateStr = dateStringArray.join(' ');

          // eslint-disable-next-line no-param-reassign
          sessionsClone.querySelector(
            '.venue-sche-dt'
          ).innerText = formattedDateStr;
          // eslint-disable-next-line no-param-reassign
          sessionsClone.querySelector('.venue-sche-time').innerText = `${
            session.startTime
          } - ${session.endTime}`;
          copyHtml
            .querySelector('.course-venue-individual__content')
            .insertBefore(sessionsClone, sessionHtml);
        });
        // remove clone object
        sessionHtml.remove();
        copyHtml.querySelector('.cta').href = decodeURIComponent(
          course.booklinkUrl
        );
        listDiv.appendChild(copyHtml);
      });

      const courseVenueItemElements = document.querySelectorAll(
        '[data-behaviour=course-venue-item]'
      );

      if (courseVenueItemElements) {
        courseVenueItemElements.forEach(courseVenueItemElement =>
          courseVenueItem(courseVenueItemElement)
        );
        if (totalPage <= defaultCount) {
          loadMoreCta.classList.add('hidden');
        } else {
          loadMoreCta.classList.remove('hidden');
          const items = parentElement.querySelectorAll(
            '.course-venue-individual:not(.hidden)'
          );

          items.forEach((item, index) => {
            if (index >= defaultCount) {
              item.classList.add('showhide');
            }
          });
        }
      }
    }
  };

  const setDistanceFlag = () => {
    const dist = distanceVal.value;

    switch (dist) {
      case '5':
        distance1 = false;
        break;
      case '10':
        distance2 = false;
        break;
      case '20':
        distance3 = false;
        break;
      case '25':
        distance4 = false;
        break;
      default:
        console.log(`Sorry, we are out of ${dist}.`);
    }
  };

  const swithScreen = current => {
    step1.classList.add('hidden');
    step2.classList.add('hidden');
    step3.classList.add('hidden');
    step4.classList.add('hidden');
    step5.classList.add('hidden');

    current.classList.remove('hidden');
  };

  const resetProLevelSearch = () => {
    swithScreen(step1);
    distance1 = true;
    distance2 = true;
    distance3 = true;
    distance4 = true;
    longitudeInput.value = '';
    latitudeInput.value = '';
    searchPlace.value = '';
    distanceVal.value = '';
    searchBox.value = '';
    searchBox.classList.remove('location-added');
    currentBtn.classList.remove('hidden');
    locationFound.classList.add('hidden');
    locationNotFound.classList.add('hidden');
    searchBlock.classList.add('hidden');
    enterLocationCta.classList.remove('hidden');
    const distDiv = parentElement.querySelector('.pro-level-1');
    const selectDiv = distDiv.querySelector(
      '.pro-level-location__distance--label span.filter'
    );
    const select = distDiv.querySelector(
      '.pro-level-location__distance--select'
    );

    select.value = '';
    select.dispatchEvent(new Event('change'));
    selectDiv.innerText = select.options[select.selectedIndex].innerText;

    validateForm();
  };

  const checkVenueAvailable = firstScreen => {
    const longitude = longitudeInput.value;
    const latitude = latitudeInput.value;

    try {
      searchVenueCallback(longitude, latitude).then(response => {
        swithScreen(step2);
        if (response && response.isCourseAvailable) {
          // venueListData = response;
          let locationPlace;

          if (searchPlace.value) {
            locationPlace = searchPlace.value;
          } else {
            locationPlace = 'your location';
          }
          if (distanceVal.value === '25') {
            step3.querySelector('.range').innerText = `more than ${
              distanceVal.value
            } miles of, ${locationPlace}`;
          } else {
            step3.querySelector('.range').innerText = `within ${
              distanceVal.value
            } miles of, ${locationPlace}`;
          }
          swithScreen(step3);
          setTimeout(() => {
            clearBtn.focus();
          }, 100);

          const coursesList = response.offlineCourses;

          totalPage = coursesList.length;
          formatVenueList(coursesList);
          // console.log(response);
        } else {
          setDistanceFlag();
          if (!distance1 && !distance2 && !distance3 && !distance4) {
            swithScreen(step5);
          } else {
            if (firstScreen === 'true') {
              const selectDiv = step4.querySelector(
                '.pro-level-location__distance--label span.filter'
              );
              const select = step4.querySelector(
                '.pro-level-location__distance--select'
              );
              const select1 = step1.querySelector(
                '.pro-level-location__distance--select'
              );

              select.value = select1.value;
              selectDiv.innerText =
                select1.options[select1.selectedIndex].innerText;
            }

            swithScreen(step4);
            // swithScreen(step5);
          }
        }
      });
    } catch (e) {
      throw new Error('Uable to retrive match score ::', e);
    }
  };

  const generateLightBox = labelId => {
    let html = parentElement.querySelector('.pro-level-6').outerHTML;

    html = html.replace('class="pro-level-6 hidden"', 'class="pro-level-6"');
    return `
    <div role="dialog" id="${DIALOG_ID}" aria-labelledby="${labelId}" aria-modal="true" class="lightbox-overlay">
      <div class="course-availability-pro-level modal-no-bg">
          ${html}
      </div>
    </div>`;
  };

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

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

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

    // lightboxContainer.querySelector('#close').focus();

    const alertBtn = lightboxContainer.querySelector('.distance-range-alert');

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

  const loadMoreVenue = () => {
    const items = parentElement.querySelectorAll(
      '.course-venue-individual.showhide'
    );

    items.forEach((item, index) => {
      if (index < defaultCount) {
        item.classList.remove('showhide');
      }
    });

    if (items.length <= defaultCount) {
      loadMoreCta.classList.add('hidden');
    }
  };

  // Find current location coordinates
  currentBtn.addEventListener('click', e => {
    longitudeInput.value = '';
    latitudeInput.value = '';
    searchBox.value = '';
    searchBox.classList.remove('location-added');
    searchBlock.classList.add('hidden');
    enterLocationCta.classList.add('hidden');
    searchByLocation(e);
  });

  if (!map) {
    loadBingMapSerch();
  }

  searchBox.addEventListener('focus', () => {
    currentBtn.classList.add('hidden');
    locationNotFound.classList.add('hidden');
  });

  searchBox.addEventListener('keydown', () => {
    currentBtn.classList.add('hidden');
    locationNotFound.classList.add('hidden');
  });

  searchBox.addEventListener('input', e => {
    if (!e.target.value) {
      longitudeInput.value = '';
      latitudeInput.value = '';
      locationFound.classList.add('hidden');
      locationNotFound.classList.add('hidden');
      searchBox.classList.remove('location-added');
    }
  });

  const setSelectedListItem = e => {
    const { target } = e;
    const distDiv = target.closest('.pro-level-location__distance');
    const selectDiv = distDiv.querySelector(
      '.pro-level-location__distance--label span.filter'
    );
    const select = distDiv.querySelector(
      '.pro-level-location__distance--select'
    );

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

    validateForm();
  };

  const closeList = event => {
    const { target } = event;
    const distDiv = target.closest('.pro-level-location__distance');
    const selectDiv = distDiv.querySelector(
      '.pro-level-location__distance--label span.filter'
    );
    const dropdown = distDiv.querySelector(
      '.pro-level-location__distance--list'
    );
    const dropdownDiv = distDiv.querySelector(
      '.pro-level-location__distance--label'
    );

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

  dropdownDivAll.forEach(dropdownDiv => {
    const dropdown = dropdownDiv.nextElementSibling;
    const dropdownListItems = dropdown.querySelectorAll('li');

    dropdownDiv.addEventListener('click', e => {
      const { target } = e;
      const distDiv = target.closest('.pro-level-location__distance');
      const selectDiv = distDiv.querySelector(
        '.pro-level-location__distance--label span.filter'
      );

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

        if (!isExpanded && !isExpandedDiv) {
          dropdown.setAttribute('aria-expanded', 'true');
          dropdownDiv.setAttribute('aria-expanded', 'true');
          selectDiv.classList.add('active');
        } else {
          dropdown.setAttribute('aria-expanded', 'false');
          dropdownDiv.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 => {
        const { target } = e;

        setSelectedListItem(e);
        closeList(e);

        if (target.closest('.pro-level-4')) {
          swithScreen(step2);
          checkVenueAvailable('false');
        }

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

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

  selectAll.forEach(select => {
    select.addEventListener('change', event => {
      const { target } = event;
      const distDiv = target.closest('.pro-level-location__distance');
      const selectDiv = distDiv.querySelector(
        '.pro-level-location__distance--label span.filter'
      );

      setTimeout(() => {
        target.classList.remove('active');
        selectDiv.innerText = target.options[target.selectedIndex].innerText;
        distanceVal.value = target.value;
        if (target.value === '25' && target.closest('.pro-level-1')) {
          openLightbox(searchBtn);
        }
        validateForm();

        if (target.closest('.pro-level-4')) {
          swithScreen(step2);
          checkVenueAvailable('false');
        }
      }, 100);
    });
  });

  selectAll.forEach(select => {
    select.addEventListener('click', event => {
      const { target } = event;
      const distDiv = target.closest('.pro-level-location__distance');
      const selectDiv = distDiv.querySelector(
        '.pro-level-location__distance--label span.filter'
      );

      if (select.classList.contains('active')) {
        selectDiv.classList.remove('active');
        target.classList.remove('active');
      } else {
        selectDiv.classList.add('active');
        target.classList.add('active');
      }
    });
  });

  searchBtn.setAttribute('disabled', 'disabled');

  searchBtn.addEventListener('click', e => {
    e.preventDefault();
    if (!longitudeInput.value || !latitudeInput.value || !distanceVal.value) {
      return;
    }
    swithScreen(step2);
    checkVenueAvailable('true');
  });

  searchBtn.addEventListener('keydown', event => {
    if (event.keyCode === 13) {
      event.preventDefault();

      searchBtn.click();
    }
  });

  clearBtn.addEventListener('click', e => {
    e.preventDefault();
    resetProLevelSearch();
    setTimeout(() => {
      currentBtn.focus();
    }, 10);
  });

  clearBtn.addEventListener('keydown', event => {
    if (event.keyCode === 13) {
      event.preventDefault();

      clearBtn.click();
    }
  });

  startNewSearch.addEventListener('click', e => {
    e.preventDefault();
    resetProLevelSearch();
  });

  startNewSearch.addEventListener('keydown', event => {
    if (event.keyCode === 13) {
      event.preventDefault();

      startNewSearch.click();
    }
  });

  loadMoreCta.addEventListener('click', e => {
    e.preventDefault();
    loadMoreVenue();
    clearBtn.focus();
  });

  loadMoreCta.addEventListener('keydown', event => {
    if (event.keyCode === 13) {
      event.preventDefault();

      loadMoreCta.click();
    }
  });

  enterLocationCta.addEventListener('click', e => {
    e.preventDefault();
    searchBlock.classList.remove('hidden');
    enterLocationCta.classList.add('hidden');
    currentBtn.classList.add('hidden');
    locationNotFound.classList.add('hidden');
    locationFound.classList.add('hidden');
    longitudeInput.value = '';
    latitudeInput.value = '';
    searchBox.setAttribute('aria-label', 'select desired location');
    searchBox.focus();
  });

  enterLocationCta.addEventListener('keydown', event => {
    if (event.keyCode === 13) {
      event.preventDefault();

      enterLocationCta.click();
    }
  });
};