/* eslint-disable prettier/prettier */ /* eslint-disable */
<template v-if="isDataReady">
  <!-- style="overflow-y: auto; height: 800px" -->
  <div class="group-table">
    <div class="columns group-table--header">
      <div class="column is-1 checkbox">
        <div class="field">
          <b-checkbox
            :value="mainCheckbox"
            :indeterminate="isMainCheckboxIndeterminate"
            type="is-dark"
            @input="checkAllCheckboxes()"
          />
        </div>
      </div>
      <!-- ATTRIBUTES FROM PROPS -->
      <div
        v-for="(attr, index) in attributes"
        :key="index"
        class="table-column"
        :style="{ width: columnSizes[index] }"
      >
        {{ attr.title }}
      </div>
      <!-- AUTOMATED ATTRIBUTES, FROM FIRST NODE -->
      <!-- <div v-for="(value, attributeName, index) in nodeAttributes" :key="index" class="column">
        <div v-if="attributeName != 'vis'">{{ attributeName }}</div>
      </div> -->
    </div>

    <!-- TABLE CONTENT -->
    <div
      v-for="(node, i) in nodes"
      :key="i"
      class="columns group-table--row"
      :class="isObjectGloballyHighlighted(node.uuid) ? 'listitem-hover' : 'listitem'"
      @mouseover.stop="SET_GLOBAL_HIGHLIGHTS([node.uuid])"
      @mouseout="UNSET_GLOBAL_HIGHLIGHTS([node.uuid])"
    >
      <div class="column is-1 checkbox">
        <div class="columns">
          <!-- TODO Add checkboxes. (No need to stylize. I'll do it later) -->
          <div class="field">
            <b-checkbox
              type="is-dark"
              :value="checkboxes[i] ? checkboxes[i].isChecked : false"
              @input="changeCheckboxIsChecked(i)"
            />
          </div>
        </div>
      </div>
      <div class="column" style="padding: 0rem 0rem 0.3rem">
        <div class="columns">
          <div class="column">
            <!-- R O W -->
            <div class="columns group-table--row--summary">
              <!-- ATTRIBUTES FROM PROPS -->
              <div
                v-for="(attr, index) in attributes"
                :key="'group-table-value' + index"
                class="table-column"
                :style="{ width: columnSizes[index] }"
              >
                {{ node[attr.attrName] !== null ? node[attr.attrName] : 'NA' }}
              </div>
              <!-- AUTOMATED ATTRIBUTES, FROM NODES -->
              <!-- <div
                v-for="(value, attributeName, index) in node"
                :key="'group-table-value' + index"
                class=""
                style="padding: 0.75rem 0.5rem"
              >
                <div
                  v-if="attributeName != 'vis'"
                  :style="{ width: columnSizes[index], float: 'left' }"
                >
                  {{ value !== null  ? value : 'NA' }}
                  {{ value }}
                </div>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapActions, mapGetters, mapMutations } from 'vuex'

export default {
  props: {
    attributes: {
      type: Array,
      required: true
    },
    instanceId: {
      type: Number,
      required: true
    },
    columnSizes: {
      type: Array,
      required: true
    },
    dataClass: {
      type: String,
      required: true
    }
  },

  data() {
    return {
      mainCheckbox: false,
      isMainCheckboxIndeterminate: false,
      checkboxes: [],
      isDataReady: false
      // columnSizes: ['0.2rem', '4rem', '5rem', '4rem', '2rem', '2rem', '1rem', '2rem']
    }
  },

  computed: {
    ...mapGetters('data', ['getNodes', 'getIsImported']),
    ...mapGetters('data', {
      _getSelectedNodes: 'getSelectedNodes',
      _isNodeSelected: 'isNodeSelected'
    }),

    nodes: {
      get() {
        return this.getNodes(this.instanceId).filter(n => n.type === this.dataClass)
      },
      set(tag) {
        return tag
      }
    },

    nodeAttributes() {
      return this.nodes ? this.nodes[0] : null
    },

    isDataImported: {
      get() {
        return this.getIsImported(this.instanceId)
      },
      set(tag) {
        return tag
      }
    },

    selectedNodes: {
      get() {
        return this._getSelectedNodes(this.instanceId)
      },
      set(tag) {
        return tag
      }
    }
  },

  watch: {
    // first checkboxes based on nodes which already exist
    // should run only once (instead of mounted, which was called before data was ready)
    isDataImported() {
      if (!this.isDataImported || this.isDataReady) return
      let nodes = this.nodes
      for (var n of nodes) {
        this.checkboxes.push({
          isChecked: false,
          isGrouped: false,
          uuid: n.uuid
        })
      }
      this.isDataReady = true
    },

    selectedNodes() {
      this.checkboxes.forEach(ch => {
        ch.isChecked = this._isNodeSelected(this.instanceId, ch.uuid)
      })
      this.updateMainCheckbox()
    },

    // if new node was created, it creates a checkbox item for it
    nodes: {
      handler() {
        //let index = 0
        this.nodes.forEach(n => {
          // TODO maybe optimize it by having "last added node" in vuex store and add only that node without finding
          if (!this.checkboxes.find(ch => ch.uuid === n.uuid)) {
            this.checkboxes.push({
              isChecked: false,
              isGrouped: false,
              uuid: n.uuid
              //isSelected: n.isSelected
            })
          }
          // checks if isSelected attr changed and sets isChecked
          //this.checkboxes[index].isChecked = n.isSelected
          //this.checkboxes[index].isSelected = n.isSelected
          //index++
        })
      },
      deep: true
    }
  },

  methods: {
    ...mapMutations('interaction', [
      'SET_NODE_HIGHLIGHT',
      'CLEAR_NODE_HIGHLIGHT',
      'SET_LINK_HIGHLIGHT',
      'CLEAR_LINK_HIGHLIGHT'
    ]),
    ...mapActions('data', {
      _selectNodes: 'selectNodes',
      _deselectNodes: 'deselectNodes'
    }),
    ...mapGetters('interaction', {
      _isObjectGloballyHighlighted: 'isObjectGloballyHighlighted'
    }),
    ...mapMutations('interaction', ['SET_GLOBAL_HIGHLIGHTS', 'UNSET_GLOBAL_HIGHLIGHTS']),

    isObjectGloballyHighlighted(uuid) {
      if (uuid === null) return false
      return this._isObjectGloballyHighlighted()(uuid)
    },

    getSelectedNodes() {
      return this._getSelectedNodes()(this.instanceId)
    },

    selectNodes(nodeId) {
      this._selectNodes({ slotId: this.instanceId, nodeIds: [nodeId] })
    },

    deselectNodes(nodeId) {
      this._deselectNodes({ slotId: this.instanceId, nodeIds: [nodeId] })
    },

    isNodeSelected(nodeId) {
      return this._isNodeSelected()(this.instanceId, nodeId)
    },

    checkAllCheckboxes() {
      this.mainCheckbox = this.isMainCheckboxIndeterminate ? true : !this.mainCheckbox
      this.isMainCheckboxIndeterminate = false

      for (var i = 0; i < this.checkboxes.length; i++) {
        Vue.set(this.checkboxes[i], 'isChecked', this.mainCheckbox)

        this.mainCheckbox
          ? this.selectNodes(this.checkboxes[i].uuid)
          : this.deselectNodes(this.checkboxes[i].uuid)
      }
    },

    changeCheckboxIsChecked(i) {
      Vue.set(this.checkboxes[i], 'isChecked', !this.checkboxes[i].isChecked)
      this.checkboxes[i].isChecked
        ? this.selectNodes(this.checkboxes[i].uuid)
        : this.deselectNodes(this.checkboxes[i].uuid)
      this.updateMainCheckbox()
    },

    // checks if all checkboxes are checked and sets main checkbox to true, false or indeterminate
    updateMainCheckbox() {
      let count = 0
      this.checkboxes.forEach(ch => {
        if (ch.isChecked) count++
      })

      this.mainCheckbox = count === this.checkboxes.length
      this.isMainCheckboxIndeterminate = count !== 0 && count < this.checkboxes.length
    }
  }
}
</script>

<style lang="sass" scoped>
.group-table
  min-width: 42vh
  &--header
    font-weight: bold
    margin-bottom: 0.3rem
  &--row
    margin-left: 0
    margin-bottom: 0 !important
    border: 1px solid #ddd
    border-style: solid none none
    padding-top: 0.3rem
    background-color: $table-background-color //#f3f4f6
    &:hover
      background-color: $table-cell-highlight-color // #e8eeee
      // background-color: #ffffff99
    &--summary
      margin-bottom: 0 !important
    &--detail
      padding-left: 1rem
      padding-bottom: 0.3rem
      &--title
        font-size: 0.7rem
        font-weight: 600
        color: $secondary-text-color
        padding: 0.2rem 0
      &--list
        margin-left: 0.5rem

%icon
  cursor: pointer
  color: $secondary-text-color
  &:hover
    opacity: 1

.icon
  &-chevron
    @extend %icon
    margin: 0 0.5rem 0 1rem
    opacity: 0.5
  &-aggregate
    @extend %icon
    opacity: 0.6
    margin-right: 0.2rem
  &-tag
    @extend %icon
    margin-left: 0.5rem

.listitem
  color: #363636
  font-size: 0.7rem
  font-weight: normal
  &:hover
    font-weight: bold
    background: $table-cell-highlight-color

.listitem-hover
  font-weight: bold
  background: $table-cell-highlight-color

.table-column
  padding: 0.7rem

.b-checkbox.checkbox
  .check
    border: 1px solid #ffaaff !important
</style>
