<template>
  <div class="split-layout">
    <div class="graph-panes item">
      <div class="pane left">
        <div class="netvis-name left">
          {{ firstDocumentName }}
        </div>
        <NetworkGraph
          :instance-id="instanceIds[0]"
          :visual-diff="{
            highlightedNodes: graphDiff.nodes.onlyInFirst.map(n => n.uuid),
            highlightedLinks: graphDiff.links.onlyInFirst.map(n => n.uuid),
            highlightColor: '#6F76FF',
            forceNodePositions: forcePositionsInA()
          }"
          layout-position="split-left"
        />
      </div>
      <div class="pane right">
        <div v-if="selectedSecondGraph" class="netvis-name right">
          {{ secondDocumentName }}
        </div>
        <NetworkGraph
          v-if="selectedSecondGraph"
          :instance-id="instanceIds[1]"
          :visual-diff="{
            highlightedNodes: graphDiff.nodes.onlyInSecond.map(n => n.uuid),
            highlightedLinks: graphDiff.links.onlyInSecond.map(n => n.uuid),
            highlightColor: '#ff8a70',
            forceNodePositions: forcePositionsInB()
          }"
          hide-controls-help
          layout-position="split-right"
        />
        <div v-if="!selectedSecondGraph" class="instruction">
          To select a second graph, right click the corresponding commit.
        </div>
      </div>
    </div>
    <slot name="overlay" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { compareDatasets } from '@/store/modules/data/comparison'
import NetworkGraph from '@/components/NetworkVis/NetworkGraph.vue'

export default {
  components: {
    NetworkGraph
  },

  props: {
    instanceIds: { type: Array, required: true },
    firstDocumentName: { type: String, required: true },
    secondDocumentName: { type: String, required: true },
    graphLayout: { type: String, required: true } // retain|A|B
  },

  data() {
    return {
      selectedSecondGraph: true,
      graphDiff: {}
    }
  },

  beforeMount() {
    this.updateComparison()
  },

  mounted() {
    this.$store.subscribe(mutation => {
      switch (mutation.type) {
        case 'data/INIT':
        case 'data/ADD_NODE':
        case 'data/AGGREGATE_NODES':
        case 'data/DISAGGREGATE_NODE':
          this.updateComparison()
          break
        default:
          break
      }
    })
  },

  methods: {
    ...mapGetters('data', ['getState']),

    getStateA() {
      return this.getState()(this.instanceIds[0])
    },

    getStateB() {
      return this.getState()(this.instanceIds[1])
    },

    updateComparison() {
      this.graphDiff = compareDatasets(this.getStateA(), this.getStateB())
    },

    forcePositionsInA() {
      //return [{ uuid: 0, x: 0, y: 9 }]
      if (this.graphLayout !== 'B') return []
      return this.graphDiff.nodes.commonA.map(nA => {
        const nodeB = this.graphDiff.nodes.commonB.find(nB => nB.uuid === nA.uuid)
        return {
          uuid: nA.uuid,
          x: nodeB.properties.get('graph.x'),
          y: nodeB.properties.get('graph.y')
        }
      })
    },

    forcePositionsInB() {
      if (this.graphLayout !== 'A') return []
      return this.graphDiff.nodes.commonB.map(nB => {
        const nodeA = this.graphDiff.nodes.commonA.find(nA => nA.uuid === nB.uuid)
        return {
          uuid: nB.uuid,
          x: nodeA.properties.get('graph.x'),
          y: nodeA.properties.get('graph.y')
        }
      })
    }
  }
}
</script>

<style lang="sass" scoped>
.split-layout
  display: flex
  justify-content: space-evenly
  align-items: stretch
  align-content: stretch
  .item
    flex-grow: 1
    align-self: stretch

.graph-panes
    display: flex
    justify-content: space-between
    .pane
        flex-grow: 1
        height: calc(100vh - 3rem)
        width: 100%
        position: relative


.netvis-name
  font-size: 0.9 rem
  font-weight: 500
  position: absolute
  width: 100%
  padding: 1rem
  &.left
    text-align: right
    color: $netvis-graph-color-split-left
  &.right
    color: $netvis-graph-color-split-right


.instruction
  font-size: 1rem
  color: #6d6d6d
  padding: 5rem
  line-height: 500px
  width: 100%
  text-align: center
  vertical-align: middle

.pane
  margin: 0.5rem
  &.left
    background-color: $netvis-graph-background-split-left
    margin-right: 0rem
    // border-right: solid 2px #ddd
  &.right
    background-color: $netvis-graph-background-split-right

#tools-sidebar
  min-width: 20rem
  max-width: 25rem
  min-height: 100vh
</style>
