<template>
  <div v-if="loaded">
    <Toolbar view="report-viewer" />

    <div class="layout">
      <div class="item">
        <NetworkGraph v-if="showGraph" view="report-viewer" :instance-id="commitId">
          <template #overlay>
            <b-message
              v-if="errorMessage !== ''"
              class="message"
              title="Error"
              type="is-danger"
              aria-close-label="Close message"
            >
              Your code is shit, but... <br />{{ motivationalQuote.text }} --
              {{ motivationalQuote.author }}
            </b-message>
          </template>
        </NetworkGraph>
        <div class="wrapper-circles">
          <span
            v-for="(_, commitIndex) in inReportCommits"
            :key="commitIndex"
            @click="reloadVisData(index)"
          >
            <div v-if="commitIndex === index" class="circle selected" />
            <div v-else class="circle" />
          </span>
        </div>
      </div>

      <div style="position:absolute; left: 3rem; top: 3rem">
        <button
          class="button is-light"
          style="margin: 0.2rem"
          :disabled="index === 0"
          @click="reloadVisData(index - 1)"
        >
          <b-icon pack="fas" icon="arrow-left" size="is-small" />
          <span>Prev</span>
        </button>
        <button
          class="button is-light"
          style="margin: 0.2rem"
          :disabled="index === inReportCommits.length - 1"
          @click="reloadVisData(index + 1)"
        >
          <span>Next</span>
          <b-icon pack="fas" icon="arrow-right" size="is-small" />
        </button>
      </div>
      <div class="report-text">
        <p class="report-text--title">
          I am a report title
        </p>
        <p class="report-text--description">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut posuere ligula. Vivamus
          vel semper turpis, ac rutrum felis. Sed gravida metus et tempus rutrum. Phasellus at eros
          hendrerit, rutrum sapien id, sagittis mauris. Nunc vel suscipit magna, a ornare nulla.
          Nulla elementum turpis ut pretium euismod. Nulla mattis lacus ut nisl porta, nec feugiat
          nibh porta. Etiam cursus blandit neque id rutrum. Etiam finibus ut dui non efficitur.
          Quisque vestibulum velit sed turpis faucibus, sit amet facilisis tortor convallis.
          Suspendisse imperdiet euismod ex, et imperdiet magna blandit et. Sed ut purus in tortor
          laoreet tristique. Cras accumsan scelerisque urna sit amet mattis. Vivamus non lacinia
          odio. Praesent lacinia quam nisl, et mollis quam aliquam nec.
        </p>
      </div>
      <div class="report-stamp">
        <p>Report generated: 18-March-2020, 14:33 by Kristina Zakopcanova</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import NetworkGraph from '@/components/NetworkVis/NetworkGraph.vue'
import Toolbar from '@/components/Toolbar.vue'

export default {
  name: 'NetworkVis',
  components: {
    NetworkGraph,
    Toolbar
  },

  metaInfo: {
    title: 'Report viewer',
    titleTemplate: '%s | Static',
    meta: [
      {
        vmid: 'viewport',
        name: 'viewport',
        content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'
      }
    ]
  },

  data() {
    return {
      graphInstanceId: NaN,
      loaded: false,
      showGraph: false,
      showMergeCard: false,
      showProgressTree: false,
      errorMessage: '',
      motivationalQuote: { text: '', author: '' },
      visMode: 'None', // ('exploration'|'comparison'|'report')
      index: 1,
      commitId: 1
    }
  },

  computed: {
    ...mapState('workspace', ['branches', 'commits']),
    ...mapState('workspace', ['user']),
    ...mapGetters('workspace', ['getStateById']),
    inReportCommits() {
      return this.commits.filter(c => c.inReport)
    }
  },

  async created() {
    let loader = this.$loading.show({
      container: null,
      canCancel: true
    })
    await this.$store.dispatch('auth/loginUser')
    loader.hide()
    this.commitId = this.inReportCommits[this.index] ? this.inReportCommits[this.index].id : 1
    // this.commitId = this.inReportCommits[this.index].id
    await this.reloadVisData(this.index)
    this.loaded = true
  },

  methods: {
    async reloadVisData(index) {
      this.commitId = this.inReportCommits[index].id
      this.index = index
      let loader = this.$loading.show({
        container: null,
        canCancel: true
      })
      this.showGraph = false
      await this.$store.dispatch('workspace/fetchState', this.commitId)
      await this.$store.dispatch('data/import', {
        slotId: this.commitId,
        state: this.getStateById(this.commitId)
      })

      loader.hide()
      this.showGraph = true
    }
  }
}
</script>

<style lang="sass" scoped>
.layout
  display: flex
  justify-content: space-evenly
  align-items: stretch
  align-content: stretch
  position: relative
  min-height: calc(100vh - 3rem)
  .item
    flex-grow: 1
    align-self: stretch
    position: relative
    &#sidebar-item
      max-width: 26rem


#tools-top-overlay
  position: absolute
  bottom: 0
  width: 100%
  margin: 0.8rem

#tools-sidebar
  min-width: 20rem

.message
  position: absolute
  top: $workspace-margin
  right: $workspace-margin
  width: 24rem

.wrapper-circles
  display: block
  position: absolute
  width: 100%
  top: 2rem
  margin: auto
  margin-top: -15px
  text-align: center
  height: 30px

.circle
  background: #c8cccc
  border-radius: 50%
  width: 12px
  height: 12px
  margin-right: 12px
  display: inline-block
  cursor: pointer
  &.selected
    background: #ff8a70

.report-text
  position: absolute
  left: 3rem
  top: 7rem
  color: #363636
  width: 25vw
  &--title
    font-size: 1.2rem
    font-weight: 700
    margin-bottom: 1rem
  &--description
    font-size: 1rem
    line-height: 2rem

.report-stamp
  position: absolute
  left: 3rem
  bottom: 1rem
  color: #919191
  // font-weight: 700
  font-size: 0.8rem
</style>
