<template>
  <div class="article">
    <div class="article__header">
      <div class="article__meta">
        <user-meta-widget v-bind="roomEntry.author" />
      </div>
      <h1
        data-cy="article-title"
        class="article__title"
      >
        {{ roomEntry.title }}
      </h1>
    </div>
    <div class="article__content">
      <component
        v-bind="component"
        :is="component.type"
        v-for="component in roomEntry.contents"
        :key="component.id"
      />
    </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 log from 'loglevel';
import UserMetaWidget from '@/components/UserMetaWidget.vue';

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.vue';
import Comment from '@/components/rooms/Comment.vue';
import { defineAsyncComponent } from 'vue';
import { matomoTrackPageView } from '@/helpers/matomo-client';
const TextBlock = defineAsyncComponent(() =>
  import('@/components/content-blocks/TextBlock.vue')
);
const ImageBlock = defineAsyncComponent(() =>
  import('@/components/content-blocks/ImageBlock.vue')
);
const ImageUrlBlock = defineAsyncComponent(() =>
  import('@/components/content-blocks/ImageUrlBlock.vue')
);
const VideoBlock = defineAsyncComponent(() =>
  import('@/components/content-blocks/VideoBlock.vue')
);
const LinkBlock = defineAsyncComponent(() =>
  import('@/components/content-blocks/LinkBlock.vue')
);
const DocumentBlock = defineAsyncComponent(() =>
  import('@/components/content-blocks/DocumentBlock.vue')
);
const SubtitleBlock = defineAsyncComponent(() =>
  import('@/components/content-blocks/SubtitleBlock.vue')
);

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

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

  computed: {
    comments() {
      console.log(this.roomEntry);
      return this.roomEntry && this.roomEntry.comments ? this.roomEntry.comments : [];
    },
  },

  methods: {
    createComment(text) {
      log.debug(`createComment ${text}`);
      const input = {
        roomEntry: this.roomEntry.id,
        comment: text,
      };
      log.debug(`input `, input);
      this.$apollo.mutate({
        mutation: ADD_COMMENT_MUTATION,
        variables: {
          input,
        },
        update: (
          store,
          {
            data: {
              addComment: { success, comment },
            },
          }
        ) => {
          if (success) {
            const query = ROOM_ENTRY_QUERY;
            const variables = {
              slug: this.roomEntry.slug,
            };
            const { roomEntry } = store.readQuery({
              query,
              variables,
            });
            if (roomEntry) {
              const comments = [comment, ...roomEntry.comments];
              const data = {
                roomEntry: {
                  ...roomEntry,
                  comments,
                },
              };
              store.writeQuery({ query, variables, data });
            }
          }
        },
      });
    },
  },

  apollo: {
    roomEntry() {
      return {
        query: ROOM_ENTRY_QUERY,
        variables: {
          slug: this.$route.params.slug,
        },
        result() {
          matomoTrackPageView(`/room/${this.roomEntry.room.slug}/${this.roomEntry.slug}`);
        },
      };
    },
  },
};
</script>
