<template>
  <div v-if="loaded">
    <Toolbar
      view="network"
      :vis-mode="visMode"
      @switch-to-exploration="visMode = 'Exploration'"
      @switch-to-comparison="visMode = 'Comparison'"
      @switch-to-report="visMode = 'Report Editor'"
      @show-progress-tree="showProgressTree = !showProgressTree"
      @show-dataset-editor="showDatasetEditor = true"
    />
    <!-- style="background-color: #f2f2f2" -->
    <div class="layout">
      <div v-if="visMode === 'Comparison'" class="item">
        <SplitNetworkGraph
          v-if="showGraph"
          :instance-ids="[primaryGraphInstanceId, secondaryGraphInstanceId]"
          :first-document-name="getCommitById(primaryGraphInstanceId).title"
          :second-document-name="getCommitById(secondaryGraphInstanceId).title"
          :graph-layout="graphComparisonLayout"
        >
          <template #overlay>
            <b-message
              v-if="showNotification"
              class="message"
              title="New notification"
              size="is-small"
              @close="showNotification = false"
            >
              New notification available in the Notification panel.
            </b-message>
            <b-message
              v-if="errorMessage !== ''"
              class="message"
              title="Error"
              type="is-danger"
              aria-close-label="Close message"
            >
              Application crashed. Data may be in invalid state. See console logs for more
              information.
            </b-message>
          </template>
        </SplitNetworkGraph>
      </div>

      <div v-else class="item">
        <NetworkGraph v-if="primaryGraphInstanceId !== null" :instance-id="primaryGraphInstanceId">
          <template #overlay>
            <b-message
              v-if="showNotification"
              class="message"
              title="New notification"
              size="is-small"
              @close="showNotification = false"
            >
              New notification available in the Notification panel.
            </b-message>
            <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>
        <ReportInfo v-if="visMode === 'Report Editor'" style="position:absolute" />
      </div>

      <div id="sidebar-item" class="item">
        <ToolSidebar
          v-if="primaryGraphInstanceId !== null"
          id="tools-sidebar"
          :instance-id="{ primaryGraphInstanceId, secondaryGraphInstanceId }"
          :vis-mode="visMode"
          @merged="visMode = 'Exploration'"
          @layout-option-set="graphComparisonLayout = $event"
        />
      </div>
    </div>
    <b-modal :active.sync="showMergeCard" has-modal-card trap-focus aria-role="dialog" aria-modal>
      <MergeModal @cancel-merge="showMergeCard = false" @merge="showMergeCard = false" />
    </b-modal>
    <DatasetEditorModal
      v-if="primaryGraphInstanceId !== null"
      :instance-id="primaryGraphInstanceId"
      :show="showDatasetEditor"
      @hide="showDatasetEditor = false"
    />
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import ToolSidebar from '@/components/NetworkVis/ToolSidebar.vue'
import NetworkGraph from '@/components/NetworkVis/NetworkGraph.vue'
import SplitNetworkGraph from '@/components/NetworkVis/SplitNetworkGraph.vue'
import ReportInfo from '@/components/NetworkVis/ReportInfo.vue'
import DatasetEditorModal from '@/components/NetworkVis/DatasetEditorModal.vue'
import Toolbar from '@/components/Toolbar.vue'
import MergeModal from '@/components/Modals/MergeModal.vue'

export default {
  name: 'NetworkVis',
  components: {
    NetworkGraph,
    ToolSidebar,
    DatasetEditorModal,
    Toolbar,
    ReportInfo,
    MergeModal,
    SplitNetworkGraph
  },

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

  data() {
    return {
      loaded: false,
      showGraph: false,
      showMergeCard: false,
      showProgressTree: true,
      showDatasetEditor: false,
      errorMessage: '',
      motivationalQuote: { text: '', author: '' },
      visMode: 'Exploration', // ('exploration'|'comparison'|'report')
      showNotification: false,
      primaryGraphInstanceId: null,
      secondaryGraphInstanceId: null,
      graphComparisonLayout: 'retain' // set from MergePane
    }
  },

  computed: {
    ...mapState('workspace', ['user']),
    ...mapGetters('workspace', ['getStateById', 'getNotificationTime', 'getCommitById']),
    newNotificationTime() {
      return this.getNotificationTime
    }
  },

  watch: {
    newNotificationTime() {
      this.showNotification = true
    }
  },

  async created() {
    let loader = this.$loading.show({
      container: null,
      canCancel: true
    })
    await this.$store.dispatch('workspace/fetchWorkspace')
    await this.loadVisData(this.user.workspace.mainCommitId, 'primary')
    loader.hide()
    /* @todo Check if commit is not null in future */
    this.loaded = true
  },

  methods: {
    async loadVisData(commitId, where) {
      if (where === 'primary') this.primaryGraphInstanceId = null
      else if (where === 'secondary') this.secondaryGraphInstanceId = null
      else throw Error('Unspecified where')

      let loader = this.$loading.show({
        container: null,
        canCancel: true
      })
      this.showGraph = false

      await this.$store.dispatch('data/import', {
        slotId: commitId,
        state: this.getStateById(commitId)
      })
      if (where === 'primary') this.primaryGraphInstanceId = this.user.workspace.mainCommitId
      else if (where === 'secondary')
        this.secondaryGraphInstanceId = this.user.workspace.secondaryCommitId

      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
  height: 100%
  min-height: 100%

.message
  position: absolute
  top: $workspace-margin
  right: $workspace-margin
  width: 24rem
</style>
