<template>
  <b-collapse v-if="isDataReady" class="card card-right">
    <div slot="trigger" slot-scope="props" class="card-header" role="button">
      <p class="card-header-title">Nodes list</p>
      <a class="card-header-icon">
        <b-icon :icon="props.open ? 'menu-down' : 'menu-up'"></b-icon>
      </a>

      <i class="el-icon-close clickable-icon" style="float: right; padding: 3px 0"></i>
    </div>

    <div slot="header" class="clearfix">
      <span>Nodes list</span>
    </div>

    <div class="label-buefy-style" style="columns: 3 80px; column-gap: 20px;">
      <p slot="trigger" aria-controls="maincheckbox">
        <b-checkbox
          size="is-small"
          :value="isMainCheckboxChecked"
          @input="
            isMainCheckboxChecked = !isMainCheckboxChecked
            isMainCheckboxChecked ? checkAllCheckboxes() : uncheckAllCheckboxes()
            isMainCheckboxChecked ? selectAllNodes() : clearCloseNodeSelection()
          "
        >Name</b-checkbox>
      </p>
      <p>id</p>
      <p>dataclass</p>
    </div>

    <div class="card-content">
      <div class="content">
        <div
          v-for="(n, i) in nodes"
          :key="n.id"
          @mouseover="SET_NODE_HIGHLIGHT(n.id)"
          @mouseout="CLEAR_NODE_HIGHLIGHT()"
        >
          <div
            class="field"
            style="columns: 3 80px; column-gap: 20px;"
            :class="getHoveredNode === n.id ? 'field-hover' : 'field'"
          >
            <p slot="trigger" aria-controls="nodelist">
              <b-checkbox
                size="is-small"
                :value="checkboxes[i].isChecked"
                @input="
                  checkboxes[i].isChecked = !checkboxes[i].isChecked
                  checkboxes[i].isChecked ? selectNode(n.id) : deselectNode(n.id)
                "
              >{{ n.label }}</b-checkbox>
            </p>
            <p>{{ n.id }}</p>
            <p>{{ n.dataClass }}</p>
          </div>
        </div>
      </div>
    </div>
  </b-collapse>
</template>

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

export default {
  data() {
    return {
      isMainCheckboxChecked: false,
      checkboxes: [],
      isDataReady: false,
      columns: [
        // for b-table
        {
          field: 'id',
          label: 'ID',
          width: '40',
          numeric: true
        },
        {
          field: 'name',
          label: 'Name'
        },
        {
          field: 'dataclass',
          label: 'Data Class'
        }
      ]
    }
  },

  computed: {
    ...mapGetters('interaction', ['getHoveredNode']),

    nodes: {
      get() {
        return this.getNodes()
      },
      set(nodes) {
        return nodes
      }
    },

    selectedNodes() {
      return this.$store.getters['interaction/getSelectedNodes']
    }
  },

  watch: {
    // TODO implement when someone removes node -> maybe not array so we can remove just one checkbox
    nodes: {
      handler() {
        let index = 0
        this.nodes.forEach(n => {
          // if new node was created, it creates a checkbox item for it
          // TODO we should optimize it by having "last added node" in vuex store and add only that node without finding
          if (!this.checkboxes.find(ch => ch.id === n.id)) {
            this.checkboxes.push({
              isChecked: false,
              isOpen: false,
              nodeId: n.id
              //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
    }
  },

  mounted() {
    // checkboxes can't be computed because it would override values
    // but amount of checkboxes can change, so watch function nodes()
    // pushes new checkbox object only if it finds new node
    this.nodes.forEach(n => {
      this.checkboxes.push({
        isChecked: false,
        isOpen: false,
        nodeId: n.id
        //isSelected: n.isSelected
      })
      this.updateNodeIsGroupedAttr(n.id, false)
      //console.log('ch', checkboxes)
    })
    this.isDataReady = true
    console.log(this.nodes)

    this.updateAllNodesAttr(false, false)
  },

  methods: {
    ...mapActions('data', ['groupNodes', 'ungroupNode', 'updateNodes']),
    ...mapActions('interaction', [
      'selectNode',
      'deselectNode',
      'clearCloseNodeSelection',
      'showNodeSelection'
    ]),
    ...mapGetters('data', ['getNodes']),
    ...mapMutations('interaction', [
      'SET_NODE_HIGHLIGHT',
      'CLEAR_NODE_HIGHLIGHT',
      'SET_NODE_HOVER',
      'UNSET_NODE_HOVER',
      'SELECT_NODE',
      'DESELECT_NODES'
    ]),

    // updates isGrouped and isSelected attributes for all nodes to the same value
    updateAllNodesAttr(isGrouped, isSelected) {
      const diff = []
      this.nodes.forEach(n => diff.push({ id: n.id, isGrouped: isGrouped, isSelected: isSelected }))
      this.updateNodes(diff)
    },

    // updates isGrouped attribute for individual node
    updateNodeIsGroupedAttr(nodeId, isGrouped) {
      this.updateNodes([{ id: nodeId, isGrouped: isGrouped }])
    },

    // updates isSelected attribute for individual node
    updateNodeIsSelectedAttr(nodeId, isSelected) {
      this.updateNodes([{ id: nodeId, isSelected: isSelected }])
    },

    checkAllCheckboxes() {
      this.checkboxes.forEach(ch => {
        ch.isChecked = true
      })
      this.updateAllNodesAttr(true, true)
    },

    uncheckAllCheckboxes() {
      this.checkboxes.forEach(ch => {
        ch.isChecked = false
      })
      this.updateAllNodesAttr(false, false)
    },

    selectAllNodes() {
      this.nodes.forEach(n => {
        this.selectNode(n.id)
        //this.SELECT_NODE(n.id)
      })
      // nodes isSelected attributes are updated from checkAllCheckboxes
    },

    test(test = 'test') {
      console.log(test)
    }
  }
}
</script>

<style lang="sass" scoped>
@import ../_workspace

.card-right
  width: $card-right-width
  margin-bottom: 20px

.el-card__header
  padding: 12px 10px

.item
  margin-bottom: 18px

.clickable-icon
  cursor: pointer

.header-title
  padding: 10px
  margin-top: 50px
  position: relative
  top: 5px

.card-header-btn
  float: right
  padding: 8px 4px

.card-content
  padding: 0.5rem 1rem 0 1rem

.clearfix:before,
.clearfix:after
  display: table
  content: ''

.clearfix:after
  clear: both

.label-buefy-style
  color: #363636;
  display: flex;
  justify-content: space-between;
  font-size: 1rem;
  font-weight: 600;
  padding: 1rem 1rem 0 1rem

.alignleft
	display: inline
  padding: 0 0 8px 4px

.alignright
  display: inline

.small-title
  color: #363636;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0px 30px

.listitem
  color: #363636;
  font-size: 0.7rem;
  font-weight: normal;
  padding: 0px 50px

.listitem:hover
  font-weight: bold;

.visible
  opacity: 100%;

.invisible
  opacity: 0%;

.halftransparent
  opacity: 60%;

.field:hover
  font-weight: bold;

.field-hover
  font-weight: bold;
</style>
