<template>
  <div class="room-entry">
    <more-options-widget
      class="room-entry__more"
      v-if="myEntry">
      <li class="popover-links__link"><a @click="deleteRoomEntry(id)">Eintrag löschen</a></li>
      <li class="popover-links__link"><a @click="editRoomEntry(id)">Eintrag bearbeiten</a></li>
    </more-options-widget>
    <router-link
      :to="{name: 'article', params: { slug: slug }}"
      tag="div"
      class="room-entry__router-link">
      <div
        class="room-entry__header"
        v-if="image">
        <img
          :src="image"
          :alt="title"
          class="room-entry__image">
      </div>
      <div class="room-entry__content">
        <h2 class="room-entry__title">{{ title }}</h2>
        <p
          class="room-entry__teaser"
          v-html="teaser"/>
        <user-meta-widget
          v-bind="author"
          class="room-entry__author"/>
      </div>
    </router-link>
  </div>

</template>

<script>
  import DELETE_ROOM_ENTRY_MUTATION from '@/graphql/gql/mutations/deleteRoomEntry.gql';
  import ROOM_ENTRIES_QUERY from '@/graphql/gql/queries/roomEntriesQuery.gql';
  import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';

  import UserMetaWidget from '@/components/UserMetaWidget';
  import MoreOptionsWidget from '@/components/MoreOptionsWidget';
  import teaser from '@/helpers/teaser';

  export default {
    props: ['title', 'author', 'contents', 'slug', 'id'],

    components: {
      MoreOptionsWidget,
      UserMetaWidget
    },

    computed: {
      image() {
        if (this.contents) {
          let found = this.contents.find(c => c.type === 'image_url_block');
          return found ? found.value.url : '';
        }
        return '';
      },
      teaser() {
        return teaser(this.contents);
      },
      myEntry() {
        return this.author.id === this.me.id;
      }
    },

    methods: {
      deleteRoomEntry(id) {
        this.$apollo.mutate({
          mutation: DELETE_ROOM_ENTRY_MUTATION,
          variables: {
            input: {
              id
            }
          },
          update(store, {data: {deleteRoomEntry: {success, roomSlug}}}) {
            if (success) {
              const query = ROOM_ENTRIES_QUERY;
              const variables = {slug: roomSlug};
              const data = store.readQuery({query, variables});
              if (data) {
                data.room.roomEntries.edges.splice(data.room.roomEntries.edges.findIndex(edge => edge.node.id === id), 1);
                store.writeQuery({query, data, variables});
              }
            }
          }
        });
      },
      editRoomEntry(id) {
        this.$store.dispatch('editRoomEntry', id);
      }
    },

    apollo: {
      me() {
        return {
          query: ME_QUERY
        };
      }
    },
  };
</script>

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

  .room-entry {
    border-radius: 12px;
    overflow: hidden;
    background-color: $color-white;
    -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
    page-break-inside: avoid; /* Firefox */
    break-inside: avoid; /* IE 10+ */
    margin-bottom: 25px;
    cursor: pointer;
    position: relative;

    &__image {
      max-width: 100%;
    }

    &__content {
      padding: 15px;
    }

    &__title {
      font-size: toRem(21px);
      margin-bottom: 10px;
    }

    &__teaser {
      line-height: 1.5;
      margin-bottom: 10px;
      min-height: 50px;
    }

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

  }
</style>
