<template>
  <more-actions data-cy="room-entry-actions">
    <popover-link
      icon="trash-icon"
      text="Eintrag löschen"
      @link-action="deleteRoomEntry(id)"/>
    <popover-link
      icon="pen-icon"
      data-cy="edit-room-entry"
      text="Eintrag bearbeiten"
      @link-action="editRoomEntry(id)"/>
  </more-actions>
</template>

<script>
  import PopoverLink from '@/components/ui/PopoverLink';
  import MoreActions from '@/components/rooms/MoreActions';
  import DELETE_ROOM_ENTRY_MUTATION from 'gql/mutations/rooms/deleteRoomEntry';
  import ROOM_ENTRIES_QUERY from 'gql/queries/roomEntriesQuery';

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

    components: {
      MoreActions,
      PopoverLink,
    },

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

    methods: {
      deleteRoomEntry(id) {
        this.$apollo.mutate({
          mutation: DELETE_ROOM_ENTRY_MUTATION,
          variables: {
            input: {
              id,
            },
          },
          update(store, {data: {deleteRoomEntry: {success, roomSlug}}}) {
            if (success) {
              const query = ROOM_ENTRIES_QUERY;
              const variables = {slug: roomSlug};
              const data = store.readQuery({query, variables});
              if (data) {
                data.room.roomEntries.edges.splice(data.room.roomEntries.edges.findIndex(edge => edge.node.id === id), 1);
                store.writeQuery({query, data, variables});
              }
            }
          },
        });
      },
      editRoomEntry(id) {
        this.$store.dispatch('editRoomEntry', id);
      },
    },
  };
</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>
