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

<script>
import { CREATE_CONTENT_BLOCK_AFTER_PAGE, CREATE_CONTENT_BLOCK_UNDER_PARENT_PAGE } from '@/router/module.names';
import { defineAsyncComponent } from 'vue';

const AddPointer = defineAsyncComponent(() => import('@/components/icons/AddPointer.vue'));

export default {
  props: {
    where: {
      type: Object,
      validator(prop) {
        return (
          Object.prototype.hasOwnProperty.call(prop, 'after') || Object.prototype.hasOwnProperty.call(prop, 'parent')
        );
      },
    },
  },

  components: {
    AddPointer,
  },

  computed: {
    parent() {
      return this.where.parent;
    },
    after() {
      return this.where.after;
    },
    isObjectiveGroup() {
      return this.parent && this.parent.__typename === 'ObjectiveGroupNode';
    },
    slug() {
      return this.$route.params.slug;
    },
  },

  methods: {
    addContent() {
      if (this.isObjectiveGroup) {
        this.$modal.open('new-objective-wizard', { parent: this.parent.id });
      } else {
        let route;
        if (this.after && this.after.id) {
          route = {
            name: CREATE_CONTENT_BLOCK_AFTER_PAGE,
            params: {
              after: this.after.id,
              slug: this.slug,
            },
          };
        } else {
          route = {
            name: CREATE_CONTENT_BLOCK_UNDER_PARENT_PAGE,
            params: {
              parent: this.parent.id,
            },
          };
        }
        this.$router.push(route);
      }
    },
  },
};
</script>

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

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