<template>
  <div class="project-actions" data-cy="project-actions">
    <a class="project-actions__more-link" @click.stop="toggleMenu">
      <ellipses />
    </a>
    <widget-popover class="project-actions__popover" v-if="showMenu" @hide-me="showMenu = false">
      <li class="popover-links__link">
        <a data-cy="delete-project" @click="deleteProject(slug)">Projekt löschen</a>
      </li>
      <li class="popover-links__link">
        <a data-cy="edit-project" @click="editProject(slug)">Projekt bearbeiten</a>
      </li>
      <li class="popover-links__link" v-if="!final && shareButtons">
        <a data-cy="share-project" @click="updateProjectShareState(slug, true)">Projekt teilen</a>
      </li>
      <li class="popover-links__link" v-if="final && shareButtons">
        <a data-cy="unshare-project" @click="updateProjectShareState(slug, false)">Projekt nicht mehr teilen</a>
      </li>
    </widget-popover>
  </div>
</template>

<script>
import WidgetPopover from '@/components/ui/WidgetPopover';

import DELETE_PROJECT_MUTATION from '@/graphql/gql/mutations/deleteProject.gql';
import PROJECTS_QUERY from '@/graphql/gql/queries/allProjects.gql';

import updateProjectShareState from '@/mixins/update-project-share-state';
import { removeAtIndex } from '@/graphql/immutable-operations.ts';
const Ellipses = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Ellipses.vue');

export default {
  props: {
    slug: {
      type: String,
      default: '',
    },
    final: {
      type: Boolean,
      default: false,
    },
    shareButtons: {
      type: Boolean,
      default: true,
    },
  },

  mixins: [updateProjectShareState],

  components: {
    Ellipses,
    WidgetPopover,
  },

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

  methods: {
    toggleMenu: function () {
      this.showMenu = !this.showMenu;
    },
    editProject(slug) {
      this.$router.push({ name: 'edit-project', params: { slug } });
    },
    deleteProject(slug) {
      this.$apollo
        .mutate({
          mutation: DELETE_PROJECT_MUTATION,
          variables: {
            input: {
              slug,
            },
          },
          update(
            store,
            {
              data: {
                deleteProject: { success },
              },
            }
          ) {
            if (success) {
              const { projects: prevProjects } = store.readQuery({ query: PROJECTS_QUERY });

              if (prevProjects) {
                let index = prevProjects.findIndex((project) => project.slug === slug);
                const projects = removeAtIndex(prevProjects, index);

                const data = {
                  projects,
                };
                store.writeQuery({ query: PROJECTS_QUERY, data });
              }
            }
          },
        })
        .then(() => {
          this.$router.push('/portfolio');
        });
    },
  },
};
</script>

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

.project-actions {
  position: relative;

  &__more-link {
    cursor: pointer;
  }

  &__popover {
    @include popover-defaults();
    min-width: 200px;
  }

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