<template>
  <div
    class="project-entry"
    data-cy="project-entry">
    <more-options-widget
      class="project-entry__more"
      data-cy="project-entry-more"
      v-if="!readOnly">
      <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"
      data-cy="project-entry-date">{{ created | datetime }}</h3>
    <p
      class="project-entry__paragraph"
      data-cy="project-entry-activity">
      {{ description }}
    </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: ['description', 'documentUrl', 'created', 'id', 'readOnly'],
    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.splice(data.project.entries.findIndex(entry => entry.id === projectEntry.id), 1);
                store.writeQuery({query, variables, data});
              }
            }
          },
        });
      },
    },
  };
</script>

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

  .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;
      white-space: pre-line;
    }

    &__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>
