<template>
  <div class="pane">
    <b-tabs destroy-on-hide>
      <b-tab-item v-if="visMode === 'Comparison'">
        <template slot="header">
          <span>Groups</span>
        </template>
        <SplitGroupListPane :instance-id="instanceId" />
      </b-tab-item>
      <b-tab-item v-if="visMode === 'Comparison'">
        <template slot="header">
          <span>Merge</span>
        </template>
        <MergePane
          :instance-id="instanceId"
          @merged="$emit('merged')"
          @layout-option-set="$emit('layout-option-set', $event)"
        />
      </b-tab-item>
      <b-tab-item v-if="visMode !== 'Comparison'" style="position: relative; height: 95%">
        <template slot="header">
          <span>Groups</span>
        </template>
        <GroupListPane
          v-if="instanceId.primaryGraphInstanceId"
          :instance-id="instanceId.primaryGraphInstanceId"
        />
        <!-- <div style="position: absolute: bottom: 10px;" class="columns group-table--footer"> -->
        <div>
          <div>SELECTION MODE</div>
          <div class="control">
            <label class="radio">
              <input type="radio" name="rsvp" />
              nodes
            </label>
            <label class="radio">
              <input type="radio" name="rsvp" />
              links
            </label>
            <label class="radio">
              <input type="radio" name="rsvp" checked />
              nodes and links
            </label>
          </div>
        </div>
      </b-tab-item>
      <b-tab-item>
        <template slot="header">
          <span>Nodes</span>
        </template>
        <NodesListPane :instance-id="instanceId.primaryGraphInstanceId" />
      </b-tab-item>
      <b-tab-item>
        <template slot="header">
          <span>Links</span>
        </template>
        <NodesListPane :instance-id="instanceId.primaryGraphInstanceId" />
      </b-tab-item>
      <b-tab-item v-if="visMode !== 'Comparison'">
        <template slot="header">
          <span>Notifications <span v-if="newNotification">(1)</span> </span>
        </template>
        <NotificationPane
          :instance-id="instanceId.primaryGraphInstanceId"
          :new-notification="newNotification"
        />
      </b-tab-item>
      <b-tab-item v-if="visMode !== 'Comparison'">
        <template slot="header">
          <span>Map</span>
        </template>
        <MapPane :instance-id="instanceId.primaryGraphInstanceId" />
      </b-tab-item>
    </b-tabs>
  </div>
</template>

<script>
import GroupListPane from '@/components/NetworkVis/ToolSidebar/GroupListPane.vue'
import SplitGroupListPane from '@/components/NetworkVis/ToolSidebar/SplitGroupListPane.vue'
import MergePane from '@/components/NetworkVis/ToolSidebar/MergePane.vue'
import NodesListPane from '@/components/NetworkVis/ToolSidebar/NodesListPane.vue'
import NotificationPane from '@/components/NetworkVis/ToolSidebar/NotificationPane.vue'
import MapPane from '@/components/NetworkVis/ToolSidebar/MapPane.vue'
import { mapActions } from 'vuex'

export default {
  components: {
    GroupListPane,
    SplitGroupListPane,
    MergePane,
    NodesListPane,
    NotificationPane,
    MapPane
  },

  props: {
    instanceId: {
      type: Object,
      required: true
    },
    visMode: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      newNotification: false
    }
  },
  watch: {
    newNotification() {
      this.setNotificationTime({
        // slotId: this.instanceId,
        timestamp: '2020-04-24 12:00:00' //hotfix
      })
    }
  },
  methods: {
    ...mapActions('workspace', ['setNotificationTime'])
  }
}
</script>

<style lang="sass" scoped>
.pane
  width: 100%
  height: 100% //calc(85vh - 3rem)
  text-align: left
  background: $system-background-color // #e8eaee // #eee
  overflow: hidden

.horizontal-panes > .pane ~ .pane
  border-top: 1px solid #ccc

.card
  padding: 1rem
  background-color: #f3f4f6 // #e8eaee // 88

nav.tabs
  li a span
    justify-content: flex-start
    order: 0
    flex-grow: 1
    margin-top: 0.4em
    margin-bottom: 0.2em
    font-weight: 600
    font-size: 0.75rem
    text-transform: uppercase
    letter-spacing: 0.1rem
    color: $mid-gray
  li.is-active a span
    color: $dark-gray
</style>

<!-- This is nasty, but otherwise it wont work -->
<style lang="sass">
div.b-tabs nav.tabs ul li.is-active a
  border-bottom-color: $mid-gray !important
</style>
