<template>
  <div v-show="selectedNodes.length > 0" class="card">
    <BaseSmoothReflow
      :options="{
        property: ['height', 'width'],
        transition: 'height .3s ease-in-out, width .3s ease-out'
      }"
    >
      <div v-if="selectedNodes.length > 0">
        <div class="header">
          <div class="header-left">
            <span class="header-title">Selection</span>
            <BaseIcon name="simplified-node-multiples" :radius="25" class="icon" />
            {{ selectedNodes.length }}
          </div>
          <div class="header-right">
            <a class="text-button" @click="clearSelection()">
              Clear
            </a>
          </div>
        </div>

        <div class="content">
          <section v-if="state === 'open'" id="square-icon-row">
            <BaseSquareIconButton
              :blocked="selectedNodes.length < 2"
              blocked-tooltip="Select one more node."
              icon-name="simplified-group"
              @click="state = 'creating-group'"
            >
              Group
            </BaseSquareIconButton>
            <BaseSquareIconButton
              :blocked="selectedNodes.length < 2"
              blocked-tooltip="Select one more node."
              icon-name="simplified-alias"
              @click="state = 'creating-alias'"
            >
              Alias
            </BaseSquareIconButton>
            <BaseSquareIconButton icon-name="simplified-bundle" @click="state = 'creating-bundle'">
              Bundle
            </BaseSquareIconButton>
          </section>

          <section v-if="state == 'creating-group'" id="create-group">
            <header>Create new group</header>
            <b-field class="input-with-icon">
              <BaseIcon name="simplified-group" :radius="25" stretch-in-container />
              <b-input v-model="aggregationLabel" placeholder="Label" />
            </b-field>

            <div>Select specific icon</div>
            <BaseIcon v-for="name in icons" :key="name" :radius="30" :name="name" />

            <div class="buttons">
              <b-button type="is-light" @click="state = 'open'">
                Cancel
              </b-button>
              <b-button type="is-info" class="action" @click="groupNodes()">
                Aggregate
              </b-button>
            </div>
          </section>

          <section v-else-if="state == 'creating-alias'" id="create-alias">
            <header>Alias nodes</header>
            <b-field class="input-with-icon">
              <BaseIcon name="simplified-alias" :radius="25" stretch-in-container />
              <b-input v-model="aggregationLabel" placeholder="Label" />
            </b-field>

            <div>Select specific icon</div>
            <BaseIcon v-for="name in icons" :key="name" :radius="30" :name="name" />

            <div class="buttons">
              <b-button type="is-light" @click="state = 'open'">
                Cancel
              </b-button>
              <b-button type="is-info" class="action" @click="aliasNodes()">
                Aggregate
              </b-button>
            </div>
          </section>

          <section v-else-if="state == 'creating-bundle'" id="create-bundle">
            <header>Bundle nodes</header>
            <div class="column-layout">
              <div>
                <BaseIcon name="simplified-bundle" :radius="50" class="icon" />
              </div>
              <div>
                <p>
                  <span class="action">Select a target node.</span><br />
                  Selected nodes will become hidden under the target node.
                </p>
              </div>
            </div>

            <div class="buttons justify-left">
              <b-button type="is-light" @click="state = 'open'">
                Cancel
              </b-button>
            </div>
          </section>

          <hr />

          <section v-if="state == 'open'" id="run-operation">
            <!-- <header>Run operation</header> -->
            <b-dropdown aria-role="list" class="mode-dropdown" label="Mode">
              <b-button
                slot="trigger"
                slot-scope="{ active }"
                size="is-small"
                type="is-light"
                class="system-background label"
              >
                Run analytic operation
                <font-awesome-icon
                  :icon="active ? 'chevron-up' : 'chevron-down'"
                  size="sm"
                  class="font-awesome-icon"
                  style="margin-left: 1rem"
                />
              </b-button>

              <b-dropdown-item aria-role="listitem" @click="$emit('run-operation-1')">
                Find k-nearest pictures
              </b-dropdown-item>
              <b-dropdown-item aria-role="listitem" @click="$emit('run-operation-2')">
                Run traffic analysis
              </b-dropdown-item>
              <b-dropdown-item aria-role="listitem" @click="$emit('run-operation-3')">
                Run community-search analysis
              </b-dropdown-item>
            </b-dropdown>
          </section>
        </div>
      </div>
    </BaseSmoothReflow>
  </div>
</template>

<script>
export default {
  props: {
    selectedNodes: {
      type: Array,
      required: true
    }
  },

  data() {
    return {
      state: 'closed', // closed|open|creating-group|creating-alias|creating-bundle
      icons: ['person', 'document', 'location', 'account', 'phone', 'car', 'question-mark'],
      aggregationLabel: ''
    }
  },

  watch: {
    state: function(newState, oldState) {
      if (newState === 'creating-bundle') {
        this.$emit('block-existing-selection')
      }
      // unblock selection when cancelling bundle
      if (oldState === 'creating-bundle') {
        this.$emit('unblock-selection')
      }
    },

    selectedNodes: function(newArr) {
      if (this.state === 'creating-bundle') {
        this.bundleNodes()
      }
      if (newArr.length === 0) this.state = 'closed'
      if (newArr.length > 0) this.state = 'open'
    }
  },

  mounted() {
    document.addEventListener('keydown', event => {
      if (event.key === 'Escape' || event.keyCode === 27) {
        this.clearSelection()
      }
    })

    window.addEventListener('keypress', e => {
      if (this.state === 'open') {
        switch (String.fromCharCode(e.keyCode).toLowerCase()) {
          case 'g':
            this.state = 'creating-group'
            break
          case 'a':
            this.state = 'creating-alias'
            break
          case 'b':
            this.state = 'creating-bundle'
            break
        }
      }

      if (this.state === 'creating-group') {
        if (e.keyCode === 13 /* enter */) this.groupNodes()
      }

      if (this.state === 'creating-alias') {
        if (e.keyCode === 13 /* enter */) this.aliasNodes()
      }
    })
  },

  methods: {
    resetState() {
      this.state = 'closed'
      this.aggregationLabel = ''
    },
    clearSelection() {
      this.resetState()
      this.$emit('unblock-selection')
      this.$emit('clear-selection')
    },
    groupNodes() {
      this.$emit('request-aggregation', {
        type: 'group',
        label: this.aggregationLabel
      })
      this.resetState()
    },
    aliasNodes() {
      this.$emit('request-aggregation', {
        type: 'alias',
        label: this.aggregationLabel
      })
      this.resetState()
    },
    bundleNodes() {
      const lastSelectedNode = this.selectedNodes[this.selectedNodes.length - 1]
      this.$emit('request-aggregation', {
        type: 'bundle',
        targetNode: lastSelectedNode
      })
      this.$emit('unblock-selection')
      this.resetState()
    }
  }
}
</script>

<style lang="sass" scoped>
.card
  padding: 15px
  background: #F7F8FA
  border: 1px solid #c4c4c4a6
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)
  box-sizing: border-box
  border-radius: 8px
  min-width: 250px
  section
    font-size: $small-font-size
    color: $secondary-text-color
    header
      font-weight: $section-title-font-weight
      font-size: $section-title-font-size
      color: $dark-gray
  .header
    font-family: 'PT Sans', sans-serif
    font-weight: bold
    display: flex
    justify-content: space-between
    align-items: flex-end
    .header-title
      margin-right: 10px
    .icon
      position: relative
      top: 3px
    a.text-button
      display: inline-block
      text-align: right
      width: 100%
      color: $mid-gray
      font-weight: lighter
    a.text-button:hover
      color: $color-action
  .content:not(:first-child)
    margin-top: 15px

.input-with-icon
  display: flex
  span
    margin-left: 0.15rem
    margin-right: 0.5rem

#square-icon-row
  display: flex
  flex-direction: row

.buttons
  margin-top: 1rem
  justify-content: flex-end
  &.justify-left
    justify-content: flex-start
  button.action
    background-color: $color-action

span.action
  color: $color-action
  font-weight: bold

section header
  font-size: $font-size-medium
  font-weight: 400
  font-family: 'Roboto'
  margin-bottom: 0.3rem

.column-layout
  display: flex
  .icon
    margin: 0.6rem
    margin-left: 0

.mode-dropdown
  .label
      margin-top: 4px
      font-size: 14px
      text-align: center
      color: #494949
</style>
