<template>
  <div class="bookmark-actions" v-if="!editMode">
    <a
      :class="{ 'bookmark-actions__action--bookmarked': bookmarked }"
      class="bookmark-actions__action bookmark-actions__bookmark"
      data-cy="bookmark-action"
      @click="$emit('bookmark')"
    >
      <bookmark-icon :bookmarked="bookmarked" />
    </a>
    <a
      class="bookmark-actions__action bookmark-actions__add-note"
      data-cy="add-note-action"
      v-if="bookmarked && !note"
      @click="$emit('add-note')"
    >
      <add-note-icon />
    </a>
    <a
      :data-scrollto="note.id"
      data-cy="edit-note-action"
      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>
const BookmarkIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/BookmarkIcon');
const AddNoteIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/AddNoteIcon');
const NoteIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/NoteIcon');

export default {
  props: {
    bookmarked: {
      type: Boolean,
      default: false,
    },
    note: {
      type: [Object, Boolean],
      default: false,
    },
    editMode: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    BookmarkIcon,
    AddNoteIcon,
    NoteIcon,
  },
};
</script>

<style scoped lang="scss">
@import '~styles/helpers';

.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>
