<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"
    >
      {{ createdDateTime }}
    </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">
      {{ createdDate }}
    </div>
  </div>
</template>

<script>
  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';
  import {dateFilter, dateTimeFilter} from '@/filters/date-filter';
  import {removeAtIndex} from '@/graphql/immutable-operations';
  const DocumentBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/DocumentBlock');


  export default {
    props: ['description', 'documentUrl', 'created', 'id', 'readOnly'],
    components: {
      DocumentBlock,
      MoreOptionsWidget,
    },

    computed: {
      createdDate() {
        return dateFilter(this.created);
      },
      createdDateTime() {
        return dateTimeFilter(this.created);
      },
    },

    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 {project} = store.readQuery({query, variables});
              if (project) {
                const index = project.entries.findIndex(entry => entry.id === projectEntry.id);
                const entries = removeAtIndex(project.entries, index);
                const data = {
                  project: {
                    ...project,
                    entries
                  }
                };
                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>
