<template>
  <BasePane hide-header>
    <template #content>
      <div style="padding: 1rem">
        <div class="columns" style="margin-bottom: 2rem">
          <div class="column">
            <h2 class="h2-dark">
              Layout
            </h2>
            <p class="instructions" style="margin-bottom: 0.7rem">
              Match positions of nodes common between the two graphs to allow for more simple visual
              comparison
            </p>
            <div class="block" @click="$emit('layout-option-set', graphLayout)">
              <b-radio v-model="graphLayout" name="name" native-value="retain">
                Retain original layouts
              </b-radio>
              <b-radio v-model="graphLayout" name="name" native-value="A">
                Match left
              </b-radio>
              <b-radio v-model="graphLayout" name="name" native-value="B">
                Match right
              </b-radio>
            </div>
          </div>
        </div>

        <div class="columns" style="margin-bottom: 2rem">
          <div class="column is-9">
            <h2 class="h2-dark">
              Difference table
            </h2>
            <p class="instructions">
              See changes between two analysis states and select changes you want to include in the
              merged analysis state
            </p>
          </div>
          <div class="column">
            <!-- @click="$emit('merge')" -->
            <b-button size="is-small" type="is-dark" outlined @click="mergeToast">
              Merge
            </b-button>
          </div>
        </div>

        <div class="columns" style="text-transform: uppercase; margin-bottom: -.5rem">
          <div class="column is-4 table-heading" style="color: #6F76FF">
            <!-- <div style="width: 12px; height: 12px; border-radius: 6px; background-color: pink;" /> -->
            <!-- <div style="float: left"> -->
            Only in the left state
            <!-- </div> -->
          </div>
          <div class="column is-4 table-heading">
            Common in both
          </div>
          <div class="column is-4 table-heading" style="color: #ff7a5c">
            Only in the right state
          </div>
        </div>

        <div
          v-for="(md, index) in mergeData"
          :key="'category-' + index"
          class="merge-table"
          style="margin-bottom: 1.5rem"
        >
          <!-- R o w   c a p t i o n -->
          <h2
            class="columns row-caption pointer no-select"
            style="margin-top: 0.4rem; padding-bottom: 0.2rem"
            @click="md.listing = !md.listing"
          >
            {{ md.title }}
            <font-awesome-icon
              :icon="md.listing ? 'chevron-up' : 'chevron-down'"
              size="sm"
              class="font-awesome-icon"
            />
          </h2>
          <div class="columns box-sidepane">
            <!-- R o w   c e l l s -->
            <div class="column is-full">
              <!-- S u m m a r y   r o w -->
              <div class="columns summary-row">
                <div
                  v-for="(view, i) in md.views"
                  :key="'view-summary-' + i"
                  class="column is-4"
                  style="border-right: solid 1px #cccc"
                  :class="{ selected: view.selected, stripe: false }"
                  @click="md.listing = !md.listing"
                >
                  <div class="columns category-cell">
                    {{ countSelectedItems(view.items) }} selected /
                    {{ view.items.length }}
                  </div>
                </div>
              </div>

              <!-- L i s t   o f   c h a n g e s -->
              <div v-if="md.listing" class="columns" style="text-align:center">
                <div
                  v-for="(view, index) in md.views"
                  :key="index"
                  class="column is-4 scrollable "
                  style="border-right: solid 1px #cccc"
                >
                  <!-- :style="{ backgroundColor: bckgcolor[i] }" -->
                  <div
                    v-for="(item, i) in view.items"
                    :key="'item' + i"
                    class="columns selectable item-cell"
                    :class="{ selected: item.selected }"
                    style="border-radius: 0.1rem; padding: .1rem"
                    :style="{ backgroundColor: bckgcolor[index] }"
                    @click="item.selected = !item.selected"
                    @mouseover="
                      item.uuids !== undefined
                        ? SET_GLOBAL_HIGHLIGHTS(item.uuids)
                        : SET_GLOBAL_HIGHLIGHTS([item.uuid])
                    "
                    @mouseout="
                      item.uuids !== undefined
                        ? UNSET_GLOBAL_HIGHLIGHTS(item.uuids)
                        : UNSET_GLOBAL_HIGHLIGHTS([item.uuid])
                    "
                  >
                    <font-awesome-icon
                      :icon="item.selected ? ['fas', 'check-circle'] : ['far', 'circle']"
                      size="sm"
                      class="font-awesome-icon"
                    />
                    <font-awesome-icon
                      v-if="item.modified"
                      :icon="item.selected ? ['fas', 'pen-square'] : ['far', 'square']"
                      size="sm"
                      class="font-awesome-icon"
                    />
                    {{ item.name }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </BasePane>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex'
import { compareDatasets } from '@/store/modules/data/comparison'

export default {
  components: {},
  props: {
    instanceId: { type: Object, required: true }
  },

  data() {
    return {
      graphLayout: 'retain', // retain|A|B
      groupListColumns: ['name'],
      mergeData: {
        nodes: {
          title: 'nodes',
          listing: true,
          views: {}
        },
        links: {
          title: 'links',
          listing: false,
          views: {}
        },
        groups: {
          title: 'groups',
          listing: false,
          views: {}
        },
        attributes: {
          title: 'attributes',
          listing: false,
          views: {
            A: {
              value: 5,
              selected: false,
              items: []
            },
            AB: {
              value: 15,
              selected: true,
              items: []
            },
            B: {
              value: 7,
              selected: true,
              items: []
            }
          }
        }
      },
      bckgcolor: ['#6f76ff22', 'none', '#fb8c5c11']
    }
  },

  mounted() {
    this.updateComparison()

    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('interaction', {
      _isObjectGloballyHighlighted: 'isObjectGloballyHighlighted'
    }),
    ...mapMutations('interaction', ['SET_GLOBAL_HIGHLIGHTS', 'UNSET_GLOBAL_HIGHLIGHTS']),
    ...mapGetters('data', ['getState']),

    isObjectGloballyHighlighted(uuid) {
      return this._isObjectGloballyHighlighted()(uuid)
    },

    countSelectedItems(arr) {
      return arr.filter(i => i.selected).length
    },

    getStateA() {
      return this.getState()(this.instanceId.primaryGraphInstanceId)
    },

    getStateB() {
      return this.getState()(this.instanceId.secondaryGraphInstanceId)
    },

    updateComparison() {
      // FIXME: problems while changing datasets
      if (!this.getStateA() || !this.getStateB()) return
      const diff = compareDatasets(this.getStateA(), this.getStateB())

      this.mergeData.nodes.views = {
        A: {
          value: diff.nodes.onlyInFirst.length,
          selected: false,
          items: diff.nodes.onlyInFirst.map(n => {
            return { name: n.label, uuid: n.uuid, selected: false }
          })
        },

        AB: {
          value: diff.nodes.commonA.length,
          selected: true,
          items: diff.nodes.commonA.map(n => {
            return {
              name: n.label,
              uuid: n.uuid,
              selected: true,
              modified: false //diff.nodes.commonAndModified.includes(n.uuid)
            }
          })
        },

        B: {
          value: diff.nodes.onlyInSecond.length,
          selected: false,
          items: diff.nodes.onlyInSecond.map(n => {
            return { name: n.label, uuid: n.uuid, selected: false }
          })
        }
      }

      this.mergeData.links.views = {
        A: {
          value: diff.links.onlyInFirst.length,
          selected: false,
          items: diff.links.onlyInFirst.map(n => {
            return {
              name: `#${n.id} ${n.description ? n.description : ''}`,
              uuid: n.uuid,
              selected: false
            }
          })
        },

        AB: {
          value: diff.links.common.length,
          selected: true,
          items: diff.links.common.map(n => {
            return {
              name: `#${n.id} ${n.description ? n.description : ''}`,
              uuid: n.uuid,
              selected: true
            }
          })
        },

        B: {
          value: diff.links.onlyInSecond.length,
          selected: false,
          items: diff.links.onlyInSecond.map(n => {
            return {
              name: `#${n.id} ${n.description ? n.description : ''}`,
              uuid: n.uuid,
              selected: false
            }
          })
        }
      }

      this.mergeData.groups.views = {
        A: {
          value: diff.tags.onlyInFirst.length,
          selected: false,
          items: diff.tags.onlyInFirst.map(n => {
            return { name: n.name, uuids: n.highlightUuids, selected: false }
          })
        },

        AB: {
          value: diff.tags.common.length,
          selected: true,
          items: diff.tags.common.map(n => {
            return { name: n.name, uuids: n.highlightUuids, selected: true }
          })
        },

        B: {
          value: diff.tags.onlyInSecond.length,
          selected: false,
          items: diff.tags.onlyInSecond.map(n => {
            return { name: n.name, uuids: n.highlightUuids, selected: false }
          })
        }
      }
    },

    mergeToast() {
      this.$buefy.toast.open('Successfully merged analytical state')
      this.$emit('merged')
    }
  }
}
</script>

<style lang="sass" scoped>
section:first-of-type
  margin-top: 0.6em
section
  font-size: 0.9em
  margin-top: 1.4em
  &.limit-height-scrollable
    max-height: 20em
    overflow-y: auto
    overflow-x: hidden
    &.joined
      margin-top: 0

.merge-card
  max-width: 500px
  left: 40px


.card-content
  padding-top: 0rem

.column
  cursor: pointer
  user-select: none

.summary-row
  border-style: none none solid none
  border-color: #ddd
  border-width: 2px
  border-radius: 0.5rem
  &:hover
    background-color: #fff

.selectable
  // border-style: solid
  // border-color: #f3f3f3
  // border-width: 1px
  // box-shadow: 2px 2px 5px 1px rgba(158 ,158,160,0.1)
  &.selected
    // background-color: none
    // background-color: #ccc//$primary-highlight-color-half // #6F76FFaa //#f3f3f3
    font-weight: 700
    &:hover
      background-color: #ddd
  &:hover
    background-color: #e3e3e3

.stripe
  background-image: repeating-linear-gradient(-45deg,#fff, #fff 10px, #f3f3f3 10px, #f3f3f3 20px)
  // background-opacity: 0.5
  // background: linear-gradient( 135deg, #fff 25%, #ddd 25%, #ddd 50%, #fff 50%, #fff 75%, #ddd 75%, #ddd 100% )
  &:hover
    background-image: repeating-linear-gradient(-45deg,#fff, #fff 10px, #ddd 10px, #ddd 20px)
    // background-opacity: 1

.scrollable
  max-height: 150px
  // height: 200px
  overflow-y: auto
  &::-webkit-scrollbar
    background-color: rgba(222, 222, 222, 0.2) // #eee
    border-radius: 5px
    width: 5px
    // opacity: 0.5
    // &:hover
    //   opacity: 1
  &::-webkit-scrollbar-thumb
    background-color: #ccc
    width: 5px
    border-radius: 5px
    opacity: 0.5
    &:hover
      opacity: 1

.table-heading
  color: #363636
  font-size: 0.7rem
  font-weight: 700

.merge-table
  color: #363636
  font-size: 0.8rem
  // font-weight: 500
  line-height: 1.5
  // margin-bottom: 1.5rem !important
  // padding: 1rem

.row-caption
  // float: right
  padding-top: 0.1rem

.category-cell
  padding-left: 0.5rem
  padding-top: 0.1rem
  font-weight: 500

.item-cell
  padding-left: 0.5rem
  color: #555
  font-size: 0.7rem
  line-height: 1.7
  text-align: left
  border-style: solid solid none solid
  border-color: #ddd #fff
  border-width: 0.2px

.font-awesome-icon
  margin: 0.3rem 0.5rem 0rem 0.5rem
  color: #919191
</style>
