<template>
  <div class="room-widget" :class="roomClass">
    <router-link :to="{name: 'room', params: {slug: slug}}" tag="div" class="room-widget__content">
      <h2 class="room-widget__title">{{title}}</h2>
      <room-group-widget v-bind="schoolClass"></room-group-widget>
      <entry-count-widget :entryCount="entryCount"></entry-count-widget>
    </router-link>
    <widget-footer v-if="canEditRoom">
      <li class="popover-links__link"><a @click="deleteRoom()">Raum löschen</a></li>
      <li class="popover-links__link"><a @click="editRoom()">Raum bearbeiten</a></li>
    </widget-footer>
  </div>
</template>

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

  import RoomGroupWidget from '@/components/rooms/RoomGroupWidget';
  import EntryCountWidget from '@/components/rooms/EntryCountWidget';
  import WidgetFooter from '@/components/WidgetFooter';

  import {meQuery} from '@/graphql/queries';

  export default {
    props: ['slug', 'title', 'entryCount', 'appearance', 'schoolClass', 'id'],

    components: {
      EntryCountWidget,
      RoomGroupWidget,
      WidgetFooter
    },

    data() {
      return {
        showMenu: false,
        me: {
          permissions: []
        }
      }
    },

    computed: {
      roomClass() {
        return `room-widget--${this.appearance}`
      },
      canEditRoom() {
        return this.me.permissions.includes('users.can_manage_school_class_content');
      }
    },

    apollo: {
      me: meQuery
    },

    methods: {
      deleteRoom() {
        const theId = this.id
        this.$apollo.mutate({
          mutation: DELETE_ROOM_MUTATION,
          variables: {
            input: {
              id: theId
            }
          },
          update(store, {data: {deleteRoom: {success}}}) {
            if (success) {
              const data = store.readQuery({query: ROOMS_QUERY});
              if (data) {
                data.rooms.edges.splice(data.rooms.edges.findIndex(edge => edge.node.id === theId), 1);
                store.writeQuery({query: ROOMS_QUERY, data});
              }
            }
          }
        })
      },
      editRoom() {
        this.$router.push({name: 'edit-room', params: {id: this.id}});
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "@/styles/_variables.scss";
  @import "@/styles/_mixins.scss";

  .room-widget {
    display: -ms-grid;
    @supports (display: grid) {
      display: grid;
    }
    height: 260px;
    grid-template-rows: 210px 1fr;
    /*overflow: hidden;*/
    @include widget-shadow;
    border: 0;

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

    @include skillbox-colors;

    svg {
      width: 30px;
      fill: $color-darkgrey-1;
      margin-right: 15px;
    }

    &__content {
      padding: 22px;
      color: $color-darkgrey-1;
      cursor: pointer;

      /*
      * For IE10+
      */
      display: -ms-grid;
      -ms-grid-rows: 80px 30px 30px;
      & > :nth-child(1) {
        -ms-grid-row: 1;
      }
      & > :nth-child(2) {
        -ms-grid-row: 2;
      }
      & > :nth-child(3) {
        -ms-grid-row: 3;
      }
    }

    &__title {
      font-size: 1.375rem;
    }
  }
</style>
