<template>
  <div class="rooms-page">
    <room-widget v-for="room in filteredRooms" v-bind="room" :key="room.name"></room-widget>
    <add-room></add-room>
  </div>
</template>

<script>
  import ROOMS_QUERY from '@/graphql/gql/roomsQuery.gql';

  import RoomWidget from '@/components/rooms/RoomWidget.vue';
  import AddRoom from '@/components/rooms/AddRoom.vue';

  export default {
    components: {
      RoomWidget,
      AddRoom
    },

    computed: {
      filteredRooms() {
        return this.rooms.filter(room => this.visibleFor(room, this.currentFilter));
      },
      currentFilter() {
        return this.$store.state.filterForGroup;
      }
    },

    methods: {
      visibleFor(room, userGroup) {
        return !userGroup || room.userGroup.id === userGroup;
      }
    },

    apollo: {
      roomQuery: {
        query: ROOMS_QUERY,
        manual: true,
        result({data, loading, networkStatus}) {
          if (!loading) {
            this.rooms = this.$getRidOfEdges(data).allRooms
          }
        }
      }
    },

    data() {
      return {
        rooms: []
      }
    }
  }
</script>

<style scoped lang="scss">
  .rooms-page {
    display: -ms-grid;
    @supports (display: grid) {
      display: grid;
    }
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    grid-auto-rows: 260px;
    padding: 50px 45px;
    max-width: 1440px;
    width: 100%;
    justify-self: center;
    box-sizing: border-box;

    /*
     * For IE10+
     */
    -ms-grid-columns: 1fr 1fr 1fr;
    -ms-grid-rows: 260px;

    /*
     * SHAME SHAME SHAME
     * this is very hacky, but we have a dynamic amount of elements. better to be safe than sorry
     * SHAME SHAME SHAME
     */
    @for $i from 1 to 101 {
      & > :nth-child(#{$i}) {
        @if ($i%3) == 0 {
          -ms-grid-column: 3;
        } @else {
          -ms-grid-column: ($i%3);
        }

        -ms-grid-row: floor(($i - 1)/3)+1;
      }
    }

  }
</style>
