<template>
  <div class="room">
    <div class="room__header">
      <h1 class="room__title">{{ room.title }}</h1>
      <p class="room__intro">
        {{ room.description }}
      </p>
      <div class="room__meta">
        <room-actions :id="room.id"/>
        <room-group-widget v-bind="room.schoolClass"/>
        <entry-count-widget :entry-count="roomEntryCount"/>
      </div>
    </div>
    <div class="room__content">
      <add-room-entry-button
        :parent="room"
        v-if="room.id">
        <!--
        the v-if is there for the case where the room hasn't loaded yet, but there is already an attempt to create
        a new room entry. mainly happens during cypress testing, but could also happen on a very slow connection
        -->
      </add-room-entry-button>
      <room-entry
        v-bind="entry"
        :key="entry.id"
        v-for="entry in room.roomEntries"/>
    </div>
  </div>
</template>

<script>
  import ROOM_ENTRIES_QUERY from '@/graphql/gql/queries/roomEntriesQuery.gql';
  import roomMixin from '@/mixins/room';

  export default {
    props: ['slug'],
    mixins: [roomMixin],

    apollo: {
      modules: {
        query: ROOM_ENTRIES_QUERY,
        variables() {
          return {
            slug: this.slug
          };
        },
        manual: true,
        // todo: do we really need manual here? update should do the trick too
        result({data, loading, networkStatus}) {
          if (!loading) {
            this.room = Object.assign({}, this.$getRidOfEdges(data).room);
            this.$store.dispatch('setSpecialContainerClass', this.room.appearance);
          }
        },
        pollInterval: 5000,
      }
    }
  };
</script>

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