/**

* @file Manages filtering and navigation on the projects page.
* @author saifkhichi96
*/

'use strict';

$(function() {

// Define filters and grid (requires Isotope js)
console.log("Creating isotope grid...");
var platform = '.all';
var data = '.all';
var $workGrid = $('.grid').isotope({
  itemSelector: '.all',
  masonry: {
    columnWidth: '.all',
    isFitWidth: true
  }
});

/** Callback to when a tab item is clicked. Activates selected tab
category and filters projects accordingly. */
function onTabClicked(tab) {
  const tabBar = new mdc.tabBar.MDCTabBar(document.querySelector('.mdc-tab-bar'));
  tabBar.activateTab(parseInt(tab.attr('role')));

  platform = tab.attr('data-filter');
  $workGrid.isotope({
    filter: data + platform
  });
}

/** Callback to when a platform filter is selected. Filters view to
show only projects for the selected platform. */
function onFilterClicked(filter) {
  $('.mdc-chip').removeClass('active');
  filter.find('.mdc-chip__text').parent().parent().addClass('active');

  data = filter.attr('data-filter');
  $workGrid.isotope({
    filter: data + platform
  });
}

/** Updates view to show default category, depending on the screen
size. */
function showDefaultCategory() {
  if ($('.bottom-navigation').is(':visible')) {
    $('.bottom-navigation .mdc-tab--active').click();
  } else {
    platform = '.all';
    $workGrid.isotope({
      filter: data + platform
    });
  }
}

// Set up click listeners
console.log("Registering view filters...");
$('.bottom-navigation .mdc-tab').click(function() { onTabClicked($(this)) });
$('.portfolio-filter li').click(function() { onFilterClicked($(this)) });

// Update view on window resize
$(window).resize(showDefaultCategory);

// Show defaults on start
console.log("Activating default view...");
$('.mdc-chip__text.active').parent().parent().click();
showDefaultCategory();

console.log("Projects setup complete!");

});