function SliderCore({
  slideContainerSelector = '[data-panels-id]',
  slideControlSelector = '[data-panel-control]'
}) {
  const slides = document.querySelector
}

function nextable() {}
function previousable() {}
function conditionallyNextable() {}
function conditionallyPreviousable() {}
function jumptoable() {}
function slidable() {}
function swipeable() {}
function autoplayable() {}

// This is fairly primitive, but it works well enough.
// With this being a class, I can create any number of sliders on
// a page by using `new Slider(options)`.
// FIXME: this is not possible at the minute, because I'm selecting
// on a `document` basis; needs to be scoped to the outer selector.
class Slider {
  // The constructor takes a selector for the element that contains the
  // panels, and the next/prev nav buttons.
  // The selectors are defined in an object, like:
  //    {
  //      panelsSelector: `.panels`,
  //      prevBtnSelector: `.panels-nav-prev`,
  //      nextBtnSelector: `.panels-nav-next`
  //    }
  constructor({ panelsSelector, prevBtnSelector, nextBtnSelector, panelNavSelector = null }) {
    // In the constructor, I take the selectors, and turn them into actual
    // references to elements in the document.
    this.panelsContainer = document.querySelector(panelsSelector);
    // I don't need to search for the individual panels - I just grab the children
    // of their container.
    this.panels = this.panelsContainer.children;
    // I could have simplified this further by just selecting
    // the block with the buttons in and using `.children` again,
    // but I want to be able to individually enable/disable them.
    this.prevBtn = document.querySelector(prevBtnSelector);
    this.nextBtn = document.querySelector(nextBtnSelector);
    // I want a set of nav items so if necessary I can select
    // a specific panel.
    this.panelNav = document.querySelector(panelNavSelector);
    this.panelNavItems = Array.from(this.panelNav.children);
    // Instead of keeping references in the dom, I keep a record
    // of whereabout the slider is at in a state object. This is
    // similar to how React deals with things:
    this.state = {
      currentPanelIndex: 0,
      firstPanelIndex: 0,
      lastPanelIndex: this.panels.length - 1
    }
  }
  
  // If I'm on the last panel, I can't logically go further right. And
  // if I'm on the first panel, I can't go further left. I'll just disble
  // the buttons if that's the case.
  enableDisableButtons() {
    if(this.state.currentPanelIndex === this.state.firstPanelIndex) { this.prevBtn.classList.add(`disabled`); } else { this.prevBtn.classList.remove(`disabled`); }
    if(this.state.currentPanelIndex === this.state.lastPanelIndex) { this.nextBtn.classList.add(`disabled`); } else { this.nextBtn.classList.remove(`disabled`); }
  }
  
  // The next/previous handlers do three things:
  // As long as it isn't the lest/first panel (when they do nothing), they:
  // 1. change the `currentPanelIndex` in the state by +/- 1
  // 2. use a CSS translate to slide the whole slide container horizontally
  // 3. Enable or disable the next/prev button if necessary.
  nextPanelHandler() {
    if (this.state.currentPanelIndex < this.state.lastPanelIndex) {
      this.panelNavItems[this.state.currentPanelIndex].classList.remove(`active`)
      this.state.currentPanelIndex += 1;
      this.panelNavItems[this.state.currentPanelIndex].classList.add(`active`)
      this.slideHorizontal();
      this.enableDisableButtons();
    }
  }
  
  prevPanelHandler() {
    if (this.state.currentPanelIndex > this.state.firstPanelIndex) {
      this.panelNavItems[this.state.currentPanelIndex].classList.remove(`active`)
      this.state.currentPanelIndex -= 1;
      this.panelNavItems[this.state.currentPanelIndex].classList.add(`active`)
      this.slideHorizontal();
      this.enableDisableButtons();
    }
  }
 
  gotoPanelHandler(e) {
    console.log(`current index: ${this.state.currentPanelIndex}, target index: ${this.panelNavItems.indexOf(e.currentTarget)}`);
    if (this.state.currentPanelIndex !== this.panelNavItems.indexOf(e.currentTarget)) {
      this.panelNavItems[this.state.currentPanelIndex].classList.remove(`active`);
      this.state.currentPanelIndex = this.panelNavItems.indexOf(e.currentTarget);
      this.panelNavItems[this.state.currentPanelIndex].classList.add(`active`);
      this.slideHorizontal();
      this.enableDisableButtons();
    }
  }
  
  // By translating horizontally by a % of the total width, the slide is acheived.
  // So, for example, say there are 3 slides. The container for the slides is
  // 300% of the width of the parent. If the slider goes to the first
  // slide (at index 0), then the calculation is -(0 * 100 / 3), or -0.
  // If the slider goes to the third slide (at index 2), then the calculation
  // is -(2 * 100 / 3), or -66.6%. The slide container will move 66.6% of it's total
  // width to the left, which will bring the last slide fully into view.
  slideHorizontal() {
    this.panelsContainer.style.transform = `translateX(-${(this.state.currentPanelIndex * 100) / this.panels.length}%)`;
  }
  
  // The init function triggers the slider.
  init() {
    // Set the width of the panels container to panels.lenth * 100% of the parent, to allow it to slide.
    this.panelsContainer.style.width = `${this.panels.length * 100}%`;
    // The slider always starts on the first item. 
    this.prevBtn.classList.add(`disabled`);
    // Add an index data attribute to all the nav items, and make the first item active.
    // FIXME Hacky, adding event handler to each item for the minute
    // this.panelNavItems.forEach(navItem => addEventListener('click', this.gotoPanelHandler.bind(this), true));
    this.panelNavItems[0].classList.add(`active`);
    this.prevBtn.addEventListener('click', this.prevPanelHandler.bind(this), true);
    this.nextBtn.addEventListener('click', this.nextPanelHandler.bind(this), true);
    
  } 
}


const mySlider = new Slider({panelsSelector: `.panels`, prevBtnSelector: `.panels-nav-prev`, nextBtnSelector: `.panels-nav-next`, panelNavSelector: `.panels-nav-menu`});
mySlider.init();