let programsHolder = $('#jsProgramsHolder');

// show sidebar on screens <1200px with item details on click
function onClickShowDetailsSideBarDevice(id) {
  let selectedEntry;

  for (let i = 0; i < courses.length; i++) {
    courses[i].id.toString() === id ? (selectedEntry = courses[i]) : null;
  }

  // console.log('onClickShowDetailsSideBarDevice id: ', id);

  if (selectedEntry.hasModal === true) {
    var courseItem = $(
      '<div id="jsSideBar" class="position-fixed right-0 top-71 top-md-89 h-100 w-100 device-max-width z-99999 bg-white border-left-1-999">'
    );
    var courseItemFirstChild = $(
      '<div class="d-flex flex-column p-3 my-3 mx-auto">'
    );
    var closeButtonElement = $('<div class="col-12 height-32 text-right">');
    var closeButton = $(
      '<button type="button" id="jsCloseDevice" class="height-32 width-32 bg-white border-0 outline-focus-none close-font">&times;</button>'
    );
    $(closeButton).on('click', () => {
      $('#jsSideBar').remove();
      $('#jsModal').remove();
      $('.jsBlur').removeClass('page-blur');
      $('body').removeClass('js-fixed');
    });
    $(closeButtonElement).append(closeButton).appendTo(courseItemFirstChild);

    var itemDescription = $('<div class="d-flex flex-wrap col-12 py-3">');

    // title, cost
    $('<div class="jsName w-100 text-uppercase name-font">')
      .append(selectedEntry.title)
      .appendTo(itemDescription);

    // audience
    var mdash = $(
      '<div class="dash-font">&nbsp;&nbsp;&mdash;&nbsp;&nbsp;</div>'
    );
    $(
      '<div class="jsAudience d-flex w-100 pt-1 pb-3 text-uppercase audience-font font-italic">'
    )
      .append($(mdash).clone(), selectedEntry.audience)
      .appendTo(itemDescription);

    // link
    var linkItem = $('<a class="color-uofl-red vendor-link-font">')
      .attr('href', selectedEntry.courseLink)
      .append('Continue to ')
      .append(selectedEntry.courseLinkVendor)
      .append(' ');
    $('<span class="d-inline-block bg-image-link-uofl-red">').appendTo(
      linkItem
    );
    $('<div class="d-flex justify-content-end col-12 py-3">')
      .append(linkItem)
      .appendTo(itemDescription);

    // content
    $(
      '<div class="jsContent w-100 pt-1 pr-2 content-font max-height-156 overflow-y-scroll">'
    )
      .append(selectedEntry.description)
      .appendTo(itemDescription);

    // cost
    $('<div class="jsCost w-100 pt-3 cost-font text-capitalize">')
      .append(selectedEntry.cost)
      .appendTo(itemDescription);

    $(courseItemFirstChild).append(itemDescription);

    // inner div
    $(courseItemFirstChild).appendTo(courseItem);
    $('#jsSideBar').remove();
    $('#jsPrepend').prepend(courseItem[0]);
  } else {
    window.location.assign(selectedEntry.courseLink);
  }
}

// show modal on screens >1200px with item details on click
function onClickShowDetailsModalDesktop(id) {
  let selectedEntry;

  for (let i = 0; i < courses.length; i++) {
    courses[i].id.toString() === id ? (selectedEntry = courses[i]) : null;
  }

  if (selectedEntry.hasModal === true) {
    // console.log('selectedEntry.title: ', selectedEntry.title);

    $('.jsBlur').addClass('page-blur');
    $('body').addClass('js-fixed');

    var courseItem = $(
      '<div id="jsModal" class="position-fixed w-100 h-auto top-25-percent z-99">'
    );
    var courseItemFirstChild = $(
      '<div class="d-flex width-720 flex-wrap bg-white p-3 my-3 mx-auto border-1-999">'
    );
    var closeButton = $(
      '<button type="button" id="jsCloseDesktop" class="height-32 width-32 bg-white border-0 outline-focus-none close-font">&times;</button>'
    );
    $(closeButton).on('click', () => {
      $('#jsSideBar').remove();
      $('#jsModal').remove();
      $('.jsBlur').removeClass('page-blur');
      $('body').removeClass('js-fixed');
    });
    $('<div class="col-12 height-32 text-right">')
      .append(closeButton)
      .appendTo(courseItemFirstChild);

    var titleAudienceDescriptionCost = $(
      '<div class="d-flex flex-wrap col-12">'
    );

    // title, audience, content, cost
    $('<div class="jsName w-100 text-uppercase name-font">')
      .append(selectedEntry.title)
      .appendTo(titleAudienceDescriptionCost);
    var mdash = $(
      '<div class="dash-font">&nbsp;&nbsp;&mdash;&nbsp;&nbsp;</div>'
    );
    $('<div class="jsAudience d-flex w-100 pt-1 audience-font font-italic">')
      .append($(mdash).clone(), selectedEntry.audience)
      .appendTo(titleAudienceDescriptionCost);
    $('<div class="jsContent w-100 pt-3 content-font">')
      .append(selectedEntry.description)
      .appendTo(titleAudienceDescriptionCost);
    $('<div class="jsCost w-100 pt-3 cost-font text-capitalize">')
      .append(selectedEntry.cost)
      .appendTo(titleAudienceDescriptionCost);

    // console.log('titleAudienceDescriptionCost: ', titleAudienceDescriptionCost)

    $(courseItemFirstChild).append(titleAudienceDescriptionCost);

    // link
    var linkItem = $('<a class="pt-3 color-uofl-red vendor-link-font">')
      .attr('href', selectedEntry.courseLink)
      .append('Continue to ')
      .append(selectedEntry.courseLinkVendor)
      .append(' ');
    $('<span class="d-inline-block bg-image-link-uofl-red">').appendTo(
      linkItem
    );
    $('<div class="d-flex justify-content-end col-12 pt-5">')
      .append(linkItem)
      .appendTo(courseItemFirstChild);

    // inner div
    $(courseItemFirstChild).appendTo(courseItem);
    $('#jsModal').remove();
    $('#jsPrepend').prepend(courseItem[0]);
  } else {
    window.location.assign(selectedEntry.courseLink);
  }
}

// create course element
function makeElement(array, insertInto) {
  for (let i = 0; i < array.length; i++) {
    var itemDiv = $('<div class="jsItem d-flex col-12 col-md-6 px-0 pb-3">');
    var itemBorderDiv = $(
      '<div class="d-flex flex-column p-4 border-solid-one-black shadow-on-hover">'
    );
    var itemPaddingDiv;

    $('<h3 class="pb-2 text-capitalize card-title-font font-weight-500">')
      .append(array[i].title)
      .appendTo(itemBorderDiv);
    $('<p class="letter-spacing-072">')
      .append(array[i].description)
      .appendTo(itemBorderDiv);
    $('<p class="mt-auto pt-3 text-capitalize font-weight-500">')
      .append(array[i].cost)
      .appendTo(itemBorderDiv);
    $('<p class="pt-3 font-italic">')
      .append(array[i].audience)
      .appendTo(itemBorderDiv);
    i % 2 === 0
      ? (itemPaddingDiv = $('<div class="d-flex pr-md-2">').append(
          itemBorderDiv
        ))
      : (itemPaddingDiv = $('<div class="d-flex pl-md-2">').append(
          itemBorderDiv
        ));
    $(itemDiv)
      .attr('id', array[i].id)
      .append(itemPaddingDiv)
      .appendTo(insertInto);
    $(itemDiv).click(function () {
      onClickShowDetailsModalDesktop($(this)[0].id);
      onClickShowDetailsSideBarDevice($(this)[0].id);
    });
  }
}

function toggleActive(e) {
  $(e.target).siblings().removeClass('underline-active');
  $(e.target).removeClass('underline-active').addClass('underline-active');
}

// generate courses items and add to the page
function displayCourses(category) {
  $(programsHolder).empty();
  var coursesCategory = [];

  if (category === undefined) {
    makeElement(courses, programsHolder);
  } else {
    for (let i = 0; i < courses.length; i++) {
      courses[i].tab.includes(category)
        ? coursesCategory.push(courses[i])
        : null;
    }
    makeElement(coursesCategory, programsHolder);
  }
}

displayCourses();
$('#jsViewAll').on('click', (e) => (displayCourses(), toggleActive(e)));
$('#jsUofl').on('click', (e) => (displayCourses('uofl'), toggleActive(e)));
$('#jsCommunity').on(
  'click',
  (e) => (displayCourses('community'), toggleActive(e))
);
$('#jsResearch').on(
  'click',
  (e) => (displayCourses('research'), toggleActive(e))
);