<template>
  <div class="content controls-help disable-selection">
    <transition name="fade">
      <section v-if="interactionState === 'default'">
        <div class="row">
          <BaseIcon name="mouse-left-click" :radius="12" class="icon" />
          <span class="label-after-icon"> to select nodes or to move graph.</span>
        </div>
        <div class="row">Hold <BaseKeyboardKeyIcon key-value="Shift" /> for entity detail.</div>
        <div class="row">Hold <BaseKeyboardKeyIcon key-value="Ctrl" /> to focus on node.</div>
      </section>
    </transition>

    <transition name="fade">
      <section v-if="interactionState === 'focus-context'">
        <div class="row">
          Hover over nodes or links to focus on them.
        </div>
        <div class="row">
          <BaseIcon name="mouse-left-click" :radius="12" class="icon" />
          <span class="label-after-icon"> to permanently focus or unfocus a node.</span>
        </div>
      </section>
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    // 'default', 'focus-context'
    interactionState: {
      type: String,
      required: true
    }
  }
}
</script>

<style lang="sass" scoped>
section
  position: absolute
  top: -1rem
  left: -1rem
  padding: 1rem
  padding-right: 2rem
  border-radius: 1rem
  background: rgb(250, 249, 247)
  opacity: 0.92

.controls-help
  color: #6D6D6D
  font-size: $small-font-size
  .row
    margin-top: 10px
    position: relative
    white-space: nowrap
    &:first-of-type
      margin-top: 0
    .icon
      position: absolute
      left: -4px
      top: -2px
    .label-after-icon
      position: relative
      left: 1.3rem

.disable-selection
    user-select: none
    -moz-user-select: none // Firefox
    -ms-user-select: none // Internet Explorer
    -khtml-user-select: none // KHTML browsers (e.g. Konqueror)
    -webkit-user-select: none // Chrome, Safari, and Opera
    -webkit-touch-callout: none // Disable Android and iOS callouts

.fade-enter-active
  transition: opacity 0.2s
.fade-leave-active
  transition: opacity 0.2s
.fade-enter, .fade-leave-to
  opacity: 0
</style>
