<template>
  <content-block-form :content-block="roomEntry" :features="features" @save="save" @back="goBack" />
</template>

<script>
import Vue from 'vue';

import NEW_ROOM_ENTRY_MUTATION from 'gql/mutations/rooms/addRoomEntry.gql';
import ROOM_ENTRIES_QUERY from '@/graphql/gql/queries/roomEntriesQuery.gql';

import ContentBlockForm from '@/components/content-block-form/ContentBlockForm';
import { ROOMS_FEATURE_SET } from '@/consts/features.consts';
import { ROOM_PAGE } from '@/router/room.names';

export default Vue.extend({
  props: {
    slug: {
      type: String,
      required: true,
    },
  },

  components: {
    ContentBlockForm,
  },

  data() {
    return {
      features: ROOMS_FEATURE_SET,
      roomEntry: {
        title: '',
        contents: [],
      },
    };
  },

  methods: {
    goBack() {
      this.$router.push({
        name: ROOM_PAGE,
        params: {
          slug: this.slug,
        },
      });
    },
    save({ title, contents }) {
      const entry = {
        title,
        contents,
        roomSlug: this.slug,
      };
      this.$apollo
        .mutate({
          mutation: NEW_ROOM_ENTRY_MUTATION,
          variables: {
            input: {
              roomEntry: entry,
            },
          },
          update: (
            store,
            {
              data: {
                addRoomEntry: { roomEntry },
              },
            }
          ) => {
            try {
              const query = ROOM_ENTRIES_QUERY;
              const variables = { slug: this.slug };
              const { room } = store.readQuery({ query, variables });
              if (room && room.roomEntries) {
                const newEdge = {
                  node: roomEntry,
                  __typename: 'RoomEntryNodeEdge',
                };
                const edges = [newEdge, ...room.roomEntries.edges];
                const data = {
                  room: {
                    ...room,
                    roomEntries: {
                      ...room.roomEntries,
                      edges,
                    },
                  },
                };
                store.writeQuery({ query, variables, data });
              }
            } catch (e) {
              // Query did not exist in the cache, and apollo throws a generic Error. Do nothing
            }
          },
        })
        .then(() => {
          this.goBack();
        });
    },
  },
});
</script>

<style scoped lang="scss">
@import '~styles/helpers';
</style>
