<template>
  <more-actions v-slot="{ toggle }" class="room-actions" data-cy="room-actions">
    <popover-link icon="pen-icon" text="Bearbeiten" @link-action="editRoom()" />
    <popover-link
      icon="eye-icon"
      data-cy="change-visibility"
      text="Sichtbarkeit anpassen"
      @link-action="changeVisibility()"
    />
    <popover-link icon="trash-icon" text="Löschen" data-cy="delete-room" @link-action="deleteRoom(toggle)" />
  </more-actions>
</template>

<script>
import DELETE_ROOM_MUTATION from 'gql/mutations/rooms/deleteRoom.gql';
import UPDATE_ROOM_VISIBILITY_MUTATION from 'gql/mutations/rooms/updateRoomVisibility.gql';

import ROOMS_QUERY from '@/graphql/gql/queries/roomsQuery.gql';
import PopoverLink from '@/components/ui/PopoverLink';
import { ROOMS_PAGE } from '@/router/room.names';
import MoreActions from '@/components/rooms/MoreActions';

export default {
  props: {
    id: {
      type: String,
      default: '',
    },
    restricted: {
      type: Boolean,
      default: false,
    },
  },

  components: {
    MoreActions,
    PopoverLink,
  },

  methods: {
    deleteRoom(toggle) {
      toggle();
      this.$modal
        .open('confirm', {
          title: 'Raum löschen',
          message:
            'Willst du diesen Raum wirklich löschen? Wenn du diesen Raum löschst, werden auch alle dazugehörigen Einträge und Kommentare gelöscht. Diese Aktion kann nicht rückgängig gemacht werden.',
        })
        .then(() => {
          this.$apollo.mutate({
            mutation: DELETE_ROOM_MUTATION,
            variables: {
              input: {
                id: this.id,
              },
            },
            update: (
              store,
              {
                data: {
                  deleteRoom: { success },
                },
              }
            ) => {
              if (success) {
                const { rooms } = store.readQuery({ query: ROOMS_QUERY });
                if (rooms) {
                  const index = rooms.findIndex((room) => room.id === this.id);
                  console.log(`found room index ${index} - rooms length ${rooms.length}`);
                  const slicedRooms = [...rooms.slice(0, index), ...rooms.slice(index + 1)];
                  console.log(`slicedRooms length ${slicedRooms.length}`);
                  const data = {
                    rooms: slicedRooms,
                  };
                  store.writeQuery({ query: ROOMS_QUERY, data });
                }
              }
              this.$router.push({
                name: ROOMS_PAGE,
              });
            },
          });
        })
        .catch(() => {});
    },
    editRoom() {
      this.$router.push({ name: 'edit-room', params: { id: this.id } });
    },
    changeVisibility() {
      this.showMenu = false;
      this.$modal
        .open('change-visibility', { restricted: this.restricted })
        .then((restricted) => {
          this.$apollo.mutate({
            mutation: UPDATE_ROOM_VISIBILITY_MUTATION,
            variables: {
              input: {
                id: this.id,
                restricted,
              },
            },
          });
        })
        .catch(() => {});
    },
  },
};
</script>

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

$height: 30px;

.room-actions {
  height: $height;
  display: none;
  @include desktop {
    display: block;
  }

  &__more-link {
    cursor: pointer;
    height: $height;
  }

  &__popover {
    display: flex;
    width: max-content;
  }
}
</style>
