export default class Careers {

constructor() {
  this.departments = [];
  this.locations = [];
  this.setupListeners();
}

showCareer(career) {
  const department = career.getElementsByClassName('department')[0].dataset.department;
  const location = career.getElementsByClassName('location')[0].dataset.location;

  return (this.departments.includes(department) || this.departments.length === 0)
    && (this.locations.some(l => location.includes(l) || l.includes(location)) || this.locations.length === 0);
}

toggleCareers() {
  Array.from(document.getElementsByClassName('Nxd-career')).forEach(function(career) {
    career.classList.toggle('hide', !this.showCareer(career));
  }, this);

  document.getElementById('no-results').classList.toggle(
    'hide',
    document.querySelectorAll('.Nxd-career:not(.hide)').length !== 0
  );

  document.querySelectorAll('.Nxd-career:not(.hide)').forEach(function(career, index) {
    career.classList.toggle('striped', index % 2 == 0);
  });
}

updateURL() {
  let currentUrl = new URL(window.location.href);
  let query = {};
  if (this.departments.length > 0) {
    Object.assign(query, { departments: this.departments });
  }
  if (this.locations.length > 0) {
    Object.assign(query, { locations: this.locations.map((l) => l.split(',')[0]) });
  }

  let params = new URLSearchParams(query);

  currentUrl.search = params
  window.history.pushState({}, 'Careers', currentUrl);
}

dropdownValue(length, item) {
  let value;
  switch(length) {
    case 0:
      value = `${item}s`;
      break;
    case 1:
      value = `1 ${item} selected`;
      break;
    default:
      value = `${length} ${item}s selected`;
  }
  return value;
}

updateDepartmentsDropdown() {
  let value = this.dropdownValue(this.departments.length, 'Department');
  document.querySelector('#department-filter button').innerText = value;
}

updateLocationsDropdown() {
  let value = this.dropdownValue(this.locations.length, 'Location');
  document.querySelector('#location-filter button').innerText = value;
}

departmentChangeHandler(event) {
  if (event.target.checked) {
    this.departments.push(event.target.value);
  } else {
    this.departments.splice(this.departments.indexOf(event.target.value), 1);
  }
  this.updateURL();
  this.updateDepartmentsDropdown();
  this.toggleCareers();
}

locationChangeHandler(event) {
  if (event.target.checked) {
    this.locations.push(event.target.value);
  } else {
    this.locations.splice(this.locations.indexOf(event.target.value), 1);
  }
  this.updateURL();
  this.updateLocationsDropdown();
  this.toggleCareers();
}

setFiltersFromURL() {
  let params = new URLSearchParams(window.location.search);
  this.departments = [];
  this.locations = [];

  params.get('departments') && params.get('departments').split(',').forEach(function(department) {
    this.departments.push(department);
    document.getElementById(department).checked = true;
  }, this);

  params.get('locations') && params.get('locations').split(',').forEach(function(location) {
    let checkbox = document.querySelector(`[id^='${location}']`);
    if (checkbox) {
      this.locations.push(location);
      checkbox.checked = true;
    }
  }, this);

  this.updateDepartmentsDropdown();
  this.updateLocationsDropdown();
  this.toggleCareers();
}

setupListeners() {
  const self = this;
  window.addEventListener('load', function() {
    if (!document.getElementById('careers')) { return; }

    self.toggleCareers();
    document.getElementById('department-filter').addEventListener('change', self.departmentChangeHandler.bind(self));
    document.getElementById('location-filter').addEventListener('change', self.locationChangeHandler.bind(self));
    self.setFiltersFromURL();
  });

  window.addEventListener('popstate', function(event) {
    if (!document.getElementById('careers')) { return; }
    self.setFiltersFromURL();
  });
}

}