<template lang="html">
  <div class="page wh-100" :class="'page-' + slug">
    <div class="page-wrapper" v-html="page.content" />
  </div>
</template>

<script>
export default {
  name: 'PageView',

  props: {
    page: { type: Object, default: undefined },
    slug: { type: String, required: true }
  },

  data () {
    return {
      links: undefined
    }
  },

  methods: {
    addFootnotes () {
      const links = this.$el.querySelectorAll('.page-wrapper a')
      console.log('addFootnotes', links)
      links.forEach((link, i) => {
        const number = parseInt(link.hash.replace('#', ''))
        if (!isNaN(number)) {
          link.classList.add('page-footnote-link')
          link.id = `footnote-${this.slug}-${number}`
          link.setAttribute('href', 'javascript:;')
          link.dataset.number = number
          if (link.parentElement.nodeName === 'SUP') {
            link.parentElement.replaceWith(link)
          }
          link.onclick = this.onFootnoteLinkClick

          this.addFootnoteContent(link, i)
        }
      })

      this.links = links
    },

    addFootnoteContent (link, i) {
      const noteContainer = document.createElement('DIV')
      noteContainer.classList.add('page-footnote-content')
      noteContainer.id = link.id + '-content'
      noteContainer.innerHTML = this.page.notes[i].content
      link.insertAdjacentElement('afterend', noteContainer)
    },

    onFootnoteLinkClick (e) {
      document.getElementById(e.target.id + '-content').classList.toggle('show')
      console.log('onFootnoteLinkClick', e.target.dataset.number, e)
    }
  },

  mounted () {
    console.log('mounted', this.page.notes)
    if (this.page.notes) this.addFootnotes()
  }
}
</script>

<style lang="scss">
.page {
  padding: $node-view-spacer-sm-y $node-view-spacer-sm-x;

  @include media-breakpoint-up($size-bp) {
    padding: $node-view-spacer-y $node-view-spacer-x;
  }

  p {
    margin-bottom: 1em;
  }

  blockquote {
    margin: 0 0 50px 50px;
    font-style: italic;

    @include media-breakpoint-up($size-bp) {
      margin: 50px 0 110px 180px;
    }
  }

  &-footnote-link {
    display: inline-block;
    text-align: center;
    background-color: $black;
    color: $white;
    font-weight: $font-weight-bold;
    font-size: 0.8em;
    font-style: normal;
    text-decoration: none;
    border-radius: 1em;
    padding: 0 .5em;
    min-width: 1.25em;
    max-height: 1.4em;
    margin: 0 .2em;

    &:hover,
    &:active {
      color: $white;
      text-decoration: none;
    }
  }

  &-footnote-content {
    background-color: $black;
    color: $white;
    font-size: 1.5rem;
    font-style: normal;
    padding: $node-view-spacer-sm-y $node-view-spacer-sm-x;
    margin: $node-view-spacer-sm-y 0;

    @include media-breakpoint-up($size-bp) {
      padding: $node-view-spacer-y $node-view-spacer-x;
      margin: $node-view-spacer-y 0;
    }

    // @include media-breakpoint-up(lg) {
    //   max-width: 50%;
    // }

    &:not(.show) {
      display: none;
    }

    p:last-of-type {
      margin-bottom: 0;
    }

    blockquote {
      margin: 0 0 1em 2em;
    }
  }


}
</style>
