<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
        :is="component.type"
        v-for="component in roomEntry.contents"
        :key="component.id"
        v-bind="component"
      />
    </div>
    <div class="article__comments">
      <comment-input @submit="createComment" />
      <comment
        :comment="comment"
        v-for="comment in comments"
        :key="comment.id"
      />
    </div>
  </div>
</template>

<script>
  import UserMetaWidget from '@/components/UserMetaWidget';

  import ROOM_ENTRY_QUERY from '@/graphql/gql/queries/roomEntryQuery.gql';
  import ADD_COMMENT_MUTATION from 'gql/mutations/addComment.gql';
  import CommentInput from '@/components/rooms/CommentInput';
  import Comment from '@/components/rooms/Comment';
  const TextBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/TextBlock');
  const ImageBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ImageBlock');
  const ImageUrlBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ImageUrlBlock');
  const VideoBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/VideoBlock');
  const LinkBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/LinkBlock');
  const DocumentBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/DocumentBlock');

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

    data() {
      return {
        roomEntry: {
          author: {
            name: 'Daniel Ramos',
            avatar: 'data:image/jpeg;base64,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',
            date: '4. Juli 2018 - 09:23',
          },
        },
      };
    },

    computed: {
      comments() {
        return (this.roomEntry && this.roomEntry.comments) ? this.roomEntry.comments.edges.map(edge => edge.node) : [];
      },
    },

    methods: {
      createComment(text) {
        this.$apollo.mutate({
          mutation: ADD_COMMENT_MUTATION,
          variables: {
            input: {
              roomEntry: this.roomEntry.id,
              comment: text,
            },
          },
          update: (store, {data: {addComment: {success, comment}}}) => {
            if (success) {
              const query = ROOM_ENTRY_QUERY;
              const variables = {
                slug: this.roomEntry.slug,
              };
              const data = store.readQuery({
                query,
                variables,
              });
              if (data) {
                data.roomEntry.comments.edges.unshift({
                  node: comment,
                  __typename: 'CommentNodeEdge'
                });
                store.writeQuery({query, variables, data});
              }
            }
          },
        });
      },
    },

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

        };
      },
    },
  };
</script>
