<template>
  <div class="project-entry">
    <more-options-widget
      class="project-entry__more"
      data-cy="project-entry-more">
      <li class="popover-links__link"><a
        data-cy="edit-project-entry"
        @click="editProjectEntry()">Eintrag bearbeiten</a>
      </li>
      <li class="popover-links__link"><a
        data-cy="delete-project-entry"
        @click="deleteProjectEntry()">Eintrag löschen</a>
      </li>
    </more-options-widget>

    <h3 class="project-entry__heading">Tätigkeit</h3>
    <p
      class="project-entry__paragraph"
      data-cy="project-entry-activity">
      {{ activity }}
    </p>
    <h3 class="project-entry__heading">Reflexion</h3>
    <p class="project-entry__paragraph">
      {{ reflection }}
    </p>
    <h3 class="project-entry__heading">
      Nächste Schritte
    </h3>
    <p class="project-entry__paragraph">
      {{ nextSteps }}
    </p>
    <p
      class="project-entry__paragraph"
      v-if="documentUrl">
      <document-block :value="{url: documentUrl}"/>
    </p>
    <div class="project-entry__date">
      {{ created | date }}
    </div>
  </div>
</template>

<script>
  import DocumentBlock from '@/components/content-blocks/DocumentBlock';
  import MoreOptionsWidget from '@/components/MoreOptionsWidget';

  import DELETE_PROJECT_ENTRY_MUTATION from '@/graphql/gql/mutations/deleteProjectEntry.gql';
  import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';

  export default {
    props: ['activity', 'reflection', 'nextSteps', 'documentUrl', 'created', 'id'],
    components: {
      DocumentBlock,
      MoreOptionsWidget
    },

    methods: {
      editProjectEntry() {
        this.$store.dispatch('editProjectEntry', this.id);
      },
      deleteProjectEntry() {
        const projectEntry = this; // otherwise we run into scope errors
        this.$apollo.mutate({
          mutation: DELETE_PROJECT_ENTRY_MUTATION,
          variables: {
            input: {
              id: this.id
            }
          },
          update(store, {data: {deleteProjectEntry: {success}}}) {
            if (success) {
              const query = PROJECT_QUERY;
              const variables = {
                slug: projectEntry.$route.params.slug
              };
              const data = store.readQuery({query, variables});
              if (data) {
                data.project.entries.edges.splice(data.project.entries.edges.findIndex(edge => edge.node.id === projectEntry.id), 1);
                store.writeQuery({query, variables, data});
              }
            }
          }
        });
      }
    }
  };
</script>

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

  .project-entry {
    background-color: $color-white;
    border-radius: $default-border-radius;
    padding: 30px 20px;
    position: relative;

    &__heading {
      font-size: toRem(22px);
      margin-bottom: 6px;
    }

    &__paragraph {
      margin-bottom: 30px;
    }

    &__date {
      font-family: $sans-serif-font-family;
      color: $color-silver-dark;
      font-size: toRem(17px);
    }

    &__link {
      cursor: pointer;
      @include heading-4;
    }

    &__more {
      position: absolute;
      top: 10px;
      right: 10px;
    }

  }
</style>
