<template>
  <div class="article">
    <div class="article__header">
      <div class="article__meta">
        <user-meta-widget v-bind="roomEntry.author"/>
      </div>
      <h1 class="article__title">{{ roomEntry.title }}</h1>
    </div>
    <div class="article__content">

      <component
        :key="component.id"
        :is="component.type"
        v-bind="component"
        v-for="component in roomEntry.contents"/>
    </div>
  </div>
</template>

<script>
  import TextBlock from '@/components/content-blocks/TextBlock';
  import ImageBlock from '@/components/content-blocks/ImageBlock';
  import ImageUrlBlock from '@/components/content-blocks/ImageUrlBlock';
  import VideoBlock from '@/components/content-blocks/VideoBlock';
  import LinkBlock from '@/components/content-blocks/LinkBlock';
  import DocumentBlock from '@/components/content-blocks/DocumentBlock';
  import UserMetaWidget from '@/components/UserMetaWidget';

  import ROOM_ENTRY_QUERY from '@/graphql/gql/queries/roomEntryQuery.gql';

  export default {
    components: {
      'text_block': TextBlock,
      'image_block': ImageBlock,
      'image_url_block': ImageUrlBlock,
      'video_block': VideoBlock,
      'link_block': LinkBlock,
      'document_block': DocumentBlock,
      UserMetaWidget
    },

    apollo: {
      roomEntry() {
        return {
          query: ROOM_ENTRY_QUERY,
          variables: {
            slug: this.$route.params.slug
          }

        };
      }
    },

    data() {
      return {
        roomEntry: {
          author: {
          name: 'Daniel Ramos',
          avatar: 'data:image/jpeg;base64,[encoded data, 6024 characters]',
          date: '4. Juli 2018 - 09:23'
        }
        },
      };
    }
  };
</script>
