Find Courses

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

export default parentElement => {
  const DIALOG_ID = 'find-courses-dialog';
  const headers = {
    // 'Ocp-Apim-Subscription-Key': '8279c7fab35f432daf1a0bd395a9ae48',
  };
  const preReqModal = document.querySelector(
    '[data-behaviour="pre-req-modal"]'
  );

  const swithScreen = ({ screen }) => {
    const modalWindow = document.querySelector('#find-courses-dialog');
    const allSteps = modalWindow.querySelector('.find-courses__search');

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

  const searchByCurrentLocation = target => {
    const allSteps = target.closest('.find-courses__search');
    const screen = allSteps.querySelector('.search-step-1 ');

    const deniedCta = screen.querySelector('.location-denied');
    const Cta = screen.querySelector('#use-current-location');

    const onDeniedClick = e => {
      e.preventDefault();
    };

    deniedCta.addEventListener('click', onDeniedClick);

    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        position => {
          const modalWindow = document.querySelector('#find-courses-dialog');

          modalWindow.querySelector('.search-longitude').value =
            position.coords.longitude;
          modalWindow.querySelector('.search-latitude').value =
            position.coords.latitude;
          const cta = screen.querySelector('.current-location-found');

          target.querySelector('.loading').remove();
          target.classList.remove('searching');
          target.classList.add('hidden');
          cta.classList.remove('hidden');
          setTimeout(() => {
            cta.click();
          }, 1000);
        },
        error => {
          Cta.classList.add('hidden');
          deniedCta.classList.remove('hidden');
          console.log(error);
        }
      );
    } else {
      // eslint-disable-next-line no-console
      console.log('Geolocation is not supported by this browser.');
    }
  };

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

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

  const searchByPostcode = event => {
    event.preventDefault();
    const { target } = event;
    const allSteps = target.closest('.find-courses__search');
    const screen = allSteps.querySelector('.search-step-2');
    const map = screen.querySelector('.MicrosoftMap');
    const inputBox = screen.querySelector('.find-courses__postcode-input');
    const btn = screen.querySelector('.postcode-search');

    swithScreen({ screen });
    screen
      .querySelector('.postcode-search')
      .setAttribute('disabled', 'disabled');
    if (!map) {
      bingMap('bingMapsearchBox', 'bingMapsearchBoxContainer');
    }
    inputBox.focus();
    // input value empty check
    inputBox.addEventListener('input', e => {
      if (!e.target.value) {
        btn.setAttribute('disabled', 'disabled');
      }
    });
  };

  async function searchVenueCallback(longitude, latitude) {
    const modalWindow = document.querySelector('#find-courses-dialog');
    const {
      courseName,
      courseBlockid,
      courseIsprocourse,
    } = modalWindow.querySelector('.find-courses').dataset;
    let blockid = '';
    // replace url with `/seachVenue/` in development to see results
    // const url = `/Courses/GetAvailableCourses/?postCodeLon=${longitude}
    // &postCodeLat=${latitude}&courseName=${courseName}`;

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

    return response.json();
  }

  const checkVenueAvailable = (longitude, latitude) => {
    const modalWindow = document.querySelector('#find-courses-dialog');
    const allSteps = modalWindow.querySelector('.find-courses__search');

    try {
      searchVenueCallback(longitude, latitude).then(response => {
        if (response && response.isCourseAvailable) {
          const {
            redirectUrl,
            courseName,
            courseBlockid,
            courseIsprocourse,
          } = modalWindow.querySelector('.find-courses').dataset;
          let blockid = '';

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

          // eslint-disable-next-line no-restricted-globals
          location.href = `${redirectUrl}?postCodeLon=${longitude}&postCodeLat=${latitude}&courseName=${courseName}&isProCourse=${courseIsprocourse}${blockid}`;
        } else {
          const screen = allSteps.querySelector('.search-step-1');

          screen.querySelector('.default-steps').classList.add('hidden');
          screen.querySelector('.error-steps').classList.remove('hidden');
          const cta = screen.querySelector('.current-location-found');
          const currentCta = screen.querySelector('.use-current-location');
          const deniedCta = screen.querySelector('.location-denied');

          if (deniedCta.classList.contains('hidden')) {
            currentCta.classList.remove('hidden');
          } else {
            currentCta.classList.add('hidden');
          }

          cta.classList.add('hidden');
          swithScreen({ screen });
          currentCta.focus();
        }
      });
    } catch (e) {
      throw new Error('Uable to retrive match score ::', e);
    }
  };

  const searchVenue = event => {
    event.preventDefault();
    const { target } = event;
    const allSteps = target.closest('.find-courses__search');
    const screen = allSteps.querySelector('.search-step-3');
    const modalWindow = document.querySelector('#find-courses-dialog');
    const longitude = modalWindow.querySelector('.search-longitude').value;
    const latitude = modalWindow.querySelector('.search-latitude').value;

    swithScreen({ screen });
    checkVenueAvailable(longitude, latitude);
  };

  const generateLightBox = labelId => {
    let html = parentElement.outerHTML;

    html = html.replace('find-courses hidden', 'find-courses');
    html = html.replace('id="searchBox"', 'id="bingMapsearchBox"');
    html = html.replace(
      'id="searchBoxContainer"',
      'id="bingMapsearchBoxContainer"'
    );
    return `
    <div role="dialog" id="${DIALOG_ID}" aria-labelledby="${labelId}" aria-modal="true" class="lightbox-overlay">
      ${html}
      <input type="hidden" class="search-longitude" value=""/>
      <input type="hidden" class="search-latitude" value=""/>
    </div>`;
  };

  const removeLightBox = () => {
    document.getElementById(DIALOG_ID).remove();
    if (document.querySelector('#find-course-near-me')) {
      document
        .querySelector('#find-course-near-me')
        .closest('a')
        .focus();
    }
  };

  const searchButton = document.querySelector('#find-course-near-me');

  if (!searchButton) {
    return;
  }

  if (
    preReqModal &&
    preReqModal.getAttribute('data-pre-req-check') === 'false'
  ) {
    return;
  }

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

    const postcodeBtn = lightboxContainer.querySelector('.enter-postcode');
    const searchBtn = lightboxContainer.querySelector('.postcode-search');
    const currentBtn = lightboxContainer.querySelector('.use-current-location');
    const currentSearchBtn = lightboxContainer.querySelector(
      '.current-location-found'
    );

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

    // Find current location coordinates
    currentBtn.addEventListener('click', e => {
      searchByLocation(e);
    });

    // search venue by current location
    currentSearchBtn.addEventListener('click', e => {
      searchVenue(e);
    });

    // load map screen
    postcodeBtn.addEventListener('click', e => {
      searchByPostcode(e);
    });

    // search venue by longitude and latitude
    searchBtn.addEventListener('click', e => {
      if (searchBtn.getAttribute('disabled') === 'disabled') {
        e.preventDefault();
        return;
      }
      searchVenue(e);
    });
  };

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

    searchButton.addEventListener('click', event => {
      event.preventDefault();
      const allSteps = parentElement.querySelector('.find-courses__search');
      const screen = allSteps.querySelector('.search-step-1');

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

      openLightbox(searchButton);
    });
  }
};