<template>
  <div class="page-nav" v-if="prev || next">
    <p class="inner">
      <div v-if="prev" class="prev page-navigator"  v-on:click="clickPrevious">
        ←
        <div class="navigation-mark">
          <span class="navigation-flag">Previous</span>
          <router-link style="pointer-events: none" v-if="prev" class="prev router-tag" :to="prev.path">{{ prev.title || prev.path }}</router-link>
        </div>
      </div>

      <div v-if="next" class="next page-navigator" v-on:click="clickNext">
        <div class="navigation-mark">
          <span class="navigation-flag">Next</span>
          <router-link style="pointer-events: none" v-if="next" class="next router-tag" :to="next.path">{{ next.title || next.path }}</router-link>
        </div>→
      </div>
    </p>
  </div>
</template>
<script>
import { resolvePage } from '../util'
import isString from 'lodash/isString'
import isNil from 'lodash/isNil'

export default {
  name: 'PageNav',
  props: ['sidebarItems'],
  computed: {
    prev () {
      return resolvePageLink(LINK_TYPES.PREV, this)
    },

    next () {
      return resolvePageLink(LINK_TYPES.NEXT, this)
    }
  },
  methods: {
    clickPrevious: function () {
      document.querySelector('.prev.router-tag').click()
    },
    clickNext: function () {
      document.querySelector('.next.router-tag').click()
    }
  }
}

function resolvePrev (page, items) {
  return find(page, items, -1)
}

function resolveNext (page, items) {
  return find(page, items, 1)
}

const LINK_TYPES = {
  NEXT: {
    resolveLink: resolveNext,
    getThemeLinkConfig: ({ nextLinks }) => nextLinks,
    getPageLinkConfig: ({ frontmatter }) => frontmatter.next
  },
  PREV: {
    resolveLink: resolvePrev,
    getThemeLinkConfig: ({ prevLinks }) => prevLinks,
    getPageLinkConfig: ({ frontmatter }) => frontmatter.prev
  }
}

function resolvePageLink (
  linkType,
  { $themeConfig, $page, $route, $site, sidebarItems }
) {
  const { resolveLink, getThemeLinkConfig, getPageLinkConfig } = linkType

  // Get link config from theme
  const themeLinkConfig = getThemeLinkConfig($themeConfig)

  // Get link config from current page
  const pageLinkConfig = getPageLinkConfig($page)

  // Page link config will overwrite global theme link config if defined
  const link = isNil(pageLinkConfig) ? themeLinkConfig : pageLinkConfig

  if (link === false) {
    return
  } else if (isString(link)) {
    return resolvePage($site.pages, link, $route.path)
  } else {
    return resolveLink($page, sidebarItems)
  }
}

function find (page, items, offset) {
  const res = []
  flatten(items, res)
  for (let i = 0; i < res.length; i++) {
    const cur = res[i]
    if (cur.type === 'page' && cur.path === decodeURIComponent(page.path)) {
      return res[i + offset]
    }
  }
}

function flatten (items, res) {
  for (let i = 0, l = items.length; i < l; i++) {
    if (items[i].type === 'group') {
      flatten(items[i].children || [], res)
    } else {
      res.push(items[i])
    }
  }
}
</script>
<style lang="stylus">
@require '../styles/wrapper.styl';
.navigation-flag {
    font-size: 12px;
    font-family: Content-font, Roboto, sans-serif;
    font-weight: 400;
    line-height: 1.625;
    color: #9DAAB6;
}
.navigation-mark {
    display: flex;
    flex-direction: column;
}
.page-navigator {
    box-shadow: rgba(116, 129, 141, 0.1) 0px 3px 8px 0px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(230, 236, 241);
    width: 40%;
    height: 50px;
    display: inline-flex;
    padding: 0 10px;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    cursor: pointer;
}
.page-navigator:hover {
  border-color: #4761f6;
  color: #4761f6;
}
.page-nav {
  @extend $wrapper;
  padding-top: 1rem;
  padding-bottom: 0;

  .inner {
    min-height: 2rem;
    margin-top: 0;
    border-top: 1px solid $borderColor;
    padding-top: 1rem;
    overflow: auto; // clear float
  }
  .router-tag {
    font-size: 16px;
    font-family: Content-font, Roboto, sans-serif;
    font-weight: 700;
    line-height: 1.5;
  }
  .next {
    float: right;
  }
}
</style>
