<template>
  <div class="edit-room-page">
    <edit-room
      :room="room"
      v-if="room.id"/>
  </div>
</template>

<script>
  // todo: refactor this, we don't need 2 components, remove editRoom or EditRoom component
  import EditRoom from '@/components/rooms/EditRoom';

  import ROOM_QUERY from '@/graphql/gql/queries/roomQuery.gql';

  export default {
    props: ['id'],

    components: {
      EditRoom
    },

    data() {
      return {
        room: {}
      };
    },

    apollo: {
      room: {
        query: ROOM_QUERY,
        variables() {
          return {
            id: this.id
          };
        },
        // manual: true,
        // result({data, loading, networkStatus}) {
        //   if (!loading) {
        //     this.room = Object.assign({}, this.$getRidOfEdges(data).room);
        //     this.$store.dispatch('setSpecialContainerClass', this.room.appearance);
        //   }
        // }
      }
    }
  };
</script>
