<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>
  import {defineAsyncComponent} from 'vue';
  const BookmarkIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/BookmarkIcon'));
  const AddNoteIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/AddNoteIcon'));
  const NoteIcon = defineAsyncComponent(() => 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>
