<template>
  <div
    class="bookmark-actions"
    v-if="!editModule">
    <a
      :class="{'bookmark-actions__action--bookmarked': bookmarked}"
      class="bookmark-actions__action bookmark-actions__bookmark"
      @click="$emit('bookmark')">
      <bookmark-icon :bookmarked="bookmarked"/>
    </a>
    <a
      class="bookmark-actions__action bookmark-actions__add-note"
      v-if="bookmarked && !note"
      @click="$emit('add-note')">
      <add-note-icon/>
    </a>
    <a
      :data-scrollto="note.id"
      class="bookmark-actions__action bookmark-actions__edit-note bookmark-actions__action--noted"
      v-if="note"
      @click="$emit('edit-note')">
      <note-icon/>
    </a>
  </div>
</template>

<script>
  import BookmarkIcon from '@/components/icons/BookmarkIcon';
  import AddNoteIcon from '@/components/icons/AddNoteIcon';
  import NoteIcon from '@/components/icons/NoteIcon';

  import {mapState} from 'vuex';

  export default {
    props: ['bookmarked', 'note'],
    components: {
      BookmarkIcon,
      AddNoteIcon,
      NoteIcon
    },
    computed: {
      ...mapState(['editModule'])
    }
  };
</script>

<style scoped lang="scss">
  @import "@/styles/_variables.scss";
  @import "@/styles/_mixins.scss";

  .bookmark-actions {
    height: 100%;
    min-height: 60px;

    padding: 0 2*$large-spacing;
    position: absolute;
    right: -5*$large-spacing;

    display: none;

    @include desktop {
      display: flex;
    }

    flex-direction: column;
    align-content: center;

    &__action {
      opacity: 0;
      transition: opacity 0.3s;
      cursor: pointer;
      width: 26px;
      display: flex;
      justify-content: center;

      &--bookmarked, &--noted {
        opacity: 1;
      }
    }

    $parent: &;

    &:hover {
      #{$parent}__action {
        opacity: 1;
      }
    }
  }

</style>
