let AppState = {
  results: [],
  prevMatchTarget: null,
  currentMatchIdx: null,
  currenTarget: {
    target: null,
    parent: null,
    firstChild: null,
    prevSib: null,
    nextSib: null
  },
  domNavigation: false
};

function updateState(nextState) {
  AppState = Object.assign(AppState, nextState);
}

// renderers
function toggleHighlight({ on, target }) {
  if (on) {
    target.setAttribute(
      'style',
      ' outline: solid red 5px;  background-color: lightblue;'
    );
  } else {
    target.removeAttribute(
      'style',
      ' outline: solid red 5px;  background-color: lightblue;'
    );
  }
}

function renderPage({ currenTarget, prevMatchTarget }) {
  if (prevMatchTarget instanceof HTMLElement) {
    toggleHighlight({
      on: false,
      target: prevMatchTarget
    });
  }
  if (currenTarget.target instanceof HTMLElement) {
    toggleHighlight({
      on: true,
      target: currenTarget.target
    });
  }
}

function setActiveNavs({ currenTarget, buttons, panel }) {
  Object.keys(buttons).forEach(nav => {
    let btn = panel.querySelector(buttons[nav]);
    currenTarget[nav] instanceof HTMLElement
      ? btn.removeAttribute('disabled', 'disabled')
      : btn.setAttribute('disabled', 'disabled');
  });
}

function renderPanel({
  panel,
  searchSelector,
  results,
  currentMatchIdx,
  currenTarget,
  domNavigation
}) {
  const btnNext = panel.querySelector('.selector-next');
  const btnPrev = panel.querySelector('.selector-prev');

  const btnTop = panel.querySelector('.nav-top');
  const btnBottom = panel.querySelector('.nav-bottom');
  const btnLeft = panel.querySelector('.nav-left');
  const btnRight = panel.querySelector('.nav-right');

  if (results.length) {
    setActiveNavs({
      currenTarget,
      panel,
      buttons: {
        parent: '.nav-top',
        firstChild: '.nav-bottom',
        prevSib: '.nav-left',
        nextSib: '.nav-right'
      }
    });

    if (domNavigation) {
      btnNext.setAttribute('disabled', 'disabled');
      btnPrev.setAttribute('disabled', 'disabled');
    } else {
      switch (true) {
        case currentMatchIdx === 0:
          btnNext.removeAttribute('disabled', 'disabled');
          btnPrev.setAttribute('disabled', 'disabled');
          break;
        case currentMatchIdx < results.length - 1:
          btnNext.removeAttribute('disabled', 'disabled');
          btnPrev.removeAttribute('disabled', 'disabled');
          break;
        case currentMatchIdx === results.length - 1:
          btnNext.setAttribute('disabled', 'disabled');
          btnPrev.removeAttribute('disabled', 'disabled');
          break;
        default:
          console.log('Current match index', currentMatchIdx);
      }
    }
  } else {
    btnNext.setAttribute('disabled', 'disabled');
    btnPrev.setAttribute('disabled', 'disabled');
    btnTop.setAttribute('disabled', 'disabled');
    btnBottom.setAttribute('disabled', 'disabled');
    btnLeft.setAttribute('disabled', 'disabled');
    btnRight.setAttribute('disabled', 'disabled');
  }
}

//state mutations
function setCurrentTarget({ target }) {
  if (target instanceof HTMLElement) {
    updateState({
      currenTarget: {
        target,
        parent: target.parentElement,
        firstChild: target.firstElementChild,
        prevSib: target.previousElementSibling,
        nextSib: target.nextElementSibling
      }
    });
  }
}

function findMatches(event) {
  const { results, currenTarget, prevMatchTarget, currentMatchIdx } = AppState;
  const query = event.target.previousElementSibling.value;
  const searchedRezults = Array.prototype.slice.apply(
    document.querySelectorAll(query)
  );

  const prevTarget =
    prevMatchTarget instanceof HTMLElement && prevMatchTarget !== null
      ? prevMatchTarget
      : searchedRezults[0];

  setCurrentTarget({
    target: searchedRezults[0]
  });

  updateState({
    results: searchedRezults,
    prevMatchTarget: prevTarget,
    domNavigation: false,
    currentMatchIdx: 0
  });

  console.log('AppState', AppState);
}

function goTo(event) {
  const { results, currentMatchIdx, prevMatchTarget } = AppState;
  let nextIndex;
  if (event.target.classList.contains('selector-next')) {
    if (currentMatchIdx < results.length - 1) {
      nextIndex = currentMatchIdx + 1;
    }
  } else if (currentMatchIdx > 0) {
    nextIndex = currentMatchIdx - 1;
  }

  setCurrentTarget({ target: results[nextIndex] });

  updateState({
    currentMatchIdx: nextIndex,
    prevMatchTarget: results[currentMatchIdx]
  });
}

function domNav(event) {
  const { currenTarget } = AppState;
  const buttons = {
    'nav-top': 'parent',
    'nav-bottom': 'firstChild',
    'nav-left': 'prevSib',
    'nav-right': 'nextSib'
  };

  updateState({
    prevMatchTarget: currenTarget.target,
    domNavigation: true
  });

  setCurrentTarget({
    target: currenTarget[buttons[event.target.classList.value]]
  });
}

//main stream

function renderView({ container, AppState }) {
  const {
    results,
    currenTarget,
    prevMatchTarget,
    domNavigation,
    currentMatchIdx
  } = AppState;

  renderPage({
    currenTarget,
    prevMatchTarget
  });

  renderPanel({
    panel: container.querySelector('.jsbursa-panel'),
    results,
    currentMatchIdx,
    currenTarget,
    domNavigation
  });
}

const render = () =>
  renderView({
    container: document.querySelector('#css-zen-garden'),
    AppState
  });

function listenTo({ event, selector, handler }) {
  document.addEventListener(event, evt => {
    if (evt.target.matches(selector)) {
      handler(evt);
      render();
    }
  });
}

function bindEvents() {
  listenTo({
    event: 'click',
    selector: 'button.selector-find',
    handler: findMatches
  });
  listenTo({
    event: 'click',
    selector: 'button.selector-next',
    handler: goTo
  });
  listenTo({
    event: 'click',
    selector: 'button.selector-prev',
    handler: goTo
  });
  listenTo({
    event: 'click',
    selector: 'button.nav-top',
    handler: domNav
  });
  listenTo({
    event: 'click',
    selector: 'button.nav-bottom',
    handler: domNav
  });
  listenTo({
    event: 'click',
    selector: 'button.nav-left',
    handler: domNav
  });
  listenTo({
    event: 'click',
    selector: 'button.nav-right',
    handler: domNav
  });
}

bindEvents();