const jQueryBridget = require('jquery-bridget');
const Isotope = require('isotope-layout');

export default {
  init() {
    // JavaScript to be fired on the catalog page
    jQueryBridget('isotope', Isotope, $);
    let $grid = $('.books');
    $grid.isotope({
      itemSelector: '.book',
      getSortData: {
        title: '.title a',
        subject: '[data-subject]',
        latest: '[data-date-published]',
      },
      sortAscending: {
        title: true,
        subject: true,
        latest: false,
      },
    });
    $('.filters > a').click((e) => {
      e.preventDefault();
      $('.filters').toggleClass('is-active');
      $('.filter-groups > div').removeClass('is-active');
    })
    $('.filter-groups .subjects > a').click((e) => {
      e.preventDefault();
      let id = $(e.currentTarget).attr('href');
      $(`.filter-groups .subjects:not(${id})`).removeClass('is-active');
      $(`.filter-groups ${id}`).toggleClass('is-active');
    })
    $('.licenses > a').click((e) => {
      e.preventDefault();
      let id = $(e.currentTarget).attr('href');
      $(id).toggleClass('is-active');
    })
    $('.subjects .filter-list a').click((e) => {
      e.preventDefault();
      if ($(e.currentTarget).hasClass('is-active')) {
        $('.subjects .filter-list a').removeClass('is-active');
        $('.subjects').removeClass('has-active-child');
      } else {
        $('.subjects .filter-list a').removeClass('is-active');
        $(e.currentTarget).addClass('is-active');
        $('.subjects').removeClass('has-active-child');
        $(e.currentTarget).parent().parent().parent('.subjects').addClass('has-active-child');
      }
      let subjectValue = $('.subjects .filter-list a.is-active').attr('data-filter');
      let licenseValue = $('.licenses .filter-list a.is-active').attr('data-filter');
      if(typeof licenseValue === "undefined") {
        licenseValue = '';
      } else {
        licenseValue = `[data-license="${licenseValue}"]`;
      }
      if(typeof subjectValue === "undefined") {
        subjectValue = '';
      } else {
        subjectValue = `[data-subject="${subjectValue}"]`;
      }
      $grid.isotope({ filter: `${subjectValue}${licenseValue}` });
    });
    $('.licenses .filter-list a').click((e) => {
      e.preventDefault();
      if ($(e.currentTarget).hasClass('is-active')) {
        $('.licenses .filter-list a').removeClass('is-active');
        $('.licenses').removeClass('has-active-child');
      } else {
        $('.licenses .filter-list a').removeClass('is-active');
        $(e.currentTarget).addClass('is-active');
        $('.licenses').addClass('has-active-child');
      }
      let subjectValue = $('.subjects .filter-list a.is-active').attr('data-filter');
      let licenseValue = $('.licenses .filter-list a.is-active').attr('data-filter');
      if(typeof licenseValue === "undefined") {
        licenseValue = '';
      } else {
        licenseValue = `[data-license="${licenseValue}"]`;
      }
      if(typeof subjectValue === "undefined") {
        subjectValue = '';
      } else {
        subjectValue = `[data-subject="${subjectValue}"]`;
      }
      $grid.isotope({ filter: `${subjectValue}${licenseValue}` });
    });
    $('.sort > a').click((e) => {
      e.preventDefault();
      $('.sort').toggleClass('is-active');
    })
    $('.sorts a').click((e) => {
      e.preventDefault();
      let sortBy = $(e.currentTarget).attr('data-sort');
      $('.sorts a').removeClass('is-active');
      $(e.currentTarget).addClass('is-active');
      $grid.isotope({sortBy: sortBy});
    });
  },
  finalize() {
  },
};