<template>
  <div class="add-content">
    <a
      class="add-content__button"
      @click="addContent">
      <add-pointer class="add-content__icon"/>
    </a>
  </div>
</template>

<script>
  import AddPointer from '@/components/icons/AddPointer';

  export default {
    props: ['after', 'parent'],

    components: {
      AddPointer
    },

    methods: {
      addContent() {
        if (this.parent && this.parent.__typename === 'ObjectiveGroupNode') {
          this.$store.dispatch('addObjective', this.parent.id);
        } else {
          this.$store.dispatch('addContentBlock', {
            after: this.after ? this.after.id : undefined,
            parent: this.parent ? this.parent.id : undefined
          });
        }
      }
    }
  };
</script>

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

  .add-content {
    display: none;
    position: relative;
    @include desktop {
      display: flex;
    }
    z-index: 1;

    justify-content: flex-end;

    &__button {
      margin-right: -85px;
      cursor: pointer;
      display: inline-grid;
    }

    &__icon {
      width: 40px;
      fill: $color-silver-dark;
    }
  }
</style>
