<template>
  <more-actions data-cy="room-entry-actions" v-slot="{ toggle }">
    <popover-link
      icon="trash-icon"
      text="Eintrag löschen"
      data-cy="delete-room-entry"
      @link-action="deleteRoomEntry(slug, toggle)"
    />
    <popover-link
      icon="pen-icon"
      data-cy="edit-room-entry"
      text="Eintrag bearbeiten"
      @link-action="editRoomEntry(slug)"
    />
  </more-actions>
</template>

<script>
import PopoverLink from '@/components/ui/PopoverLink.vue';
import MoreActions from '@/components/rooms/MoreActions.vue';
import DELETE_ROOM_ENTRY_MUTATION from 'gql/mutations/rooms/deleteRoomEntry.gql';
import ROOM_ENTRIES_QUERY from 'gql/queries/roomEntriesQuery.gql';
import { UPDATE_ROOM_ENTRY_PAGE } from '@/router/room.names';
import { removeAtIndex } from '@/graphql/immutable-operations';

export default {
  props: {
    slug: {
      type: String,
      default: '',
    },
  },

  components: {
    MoreActions,
    PopoverLink,
  },

  data() {
    return {
      showMenu: false,
    };
  },

  methods: {
    deleteRoomEntry(slug, toggle) {
      toggle();
      this.$modal
        .open('confirm', {
          title: 'Eintrag löschen',
          message:
            'Willst du diesen Eintrag wirklich löschen? Wenn du diesen Eintrag löschst, werden auch alle dazugehörigen Kommentare gelöscht. Diese Aktion kann nicht rückgängig gemacht werden.',
        })
        .then(() => {
          this.$apollo.mutate({
            mutation: DELETE_ROOM_ENTRY_MUTATION,
            variables: {
              input: {
                slug,
              },
            },
            update(
              store,
              {
                data: {
                  deleteRoomEntry: { success, roomSlug },
                },
              }
            ) {
              if (success) {
                const query = ROOM_ENTRIES_QUERY;
                const variables = { slug: roomSlug };
                const { room } = store.readQuery({ query, variables });
                if (room) {
                  const index = room.roomEntries.edges.findIndex((edge) => edge.node.slug === slug);
                  const edges = removeAtIndex(room.roomEntries.edges, index);
                  const data = {
                    room: {
                      ...room,
                      roomEntries: {
                        edges,
                      },
                    },
                  };
                  store.writeQuery({ query, data, variables });
                }
              }
            },
          });
        })
        .catch(() => {});
    },
    editRoomEntry(slug) {
      this.$router.push({
        name: UPDATE_ROOM_ENTRY_PAGE,
        params: {
          slug: this.$route.params.slug,
          entrySlug: slug,
        },
      });
    },
  },
};
</script>

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

$height: 30px;

.room-entry-actions {
  height: $height;

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

  &__popover {
    display: flex;
    width: max-content;
  }

  svg {
    width: 30px;
    fill: $color-charcoal-dark;
    margin-right: 15px;
  }
}
</style>
